Пепелсбей.net http://pepelsbey.net Tue, 26 Jan 2010 00:17:35 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Вечная бета http://pepelsbey.net/2010/01/eternal-beta/ http://pepelsbey.net/2010/01/eternal-beta/#comments Tue, 12 Jan 2010 13:56:21 +0000 pepelsbey http://pepelsbey.net/?p=477 Когда коду сайта исполняется полтора года, а дизайну целых два, то становится как-то совсем неудобно. Нет — всё работает, живёт и периодически даже патчится, но жизнь требует чего-то нового. Поэтому ещё в августе прошлого года была начата разработка новой версии этого сайта. Было решено не только сделать новый дизайн и подновить код, но и сильно упростить архитектуру сайта, раз уж изначальная задумка с заметками и статьями, по сути, провалилась.

Архитектура

После продолжительной агонии, с сайта исчезли рубрики и теперь существует всего одна главная витрина с последним постом и списком всех публикаций, спрятанным в разворачивающуюся гармошку. Основным средством для поиска предыдущих публикаций стала вспомогательная страница «Поиск», которая содержит упомянутый выше архив публикаций и форму поиска — пока силами Яндекса, но потом, возможно, появится возможность выбирать и Google.

Меньше всего изменений пришлось на страницу «Об авторе», на которой добавилось несколько социальных сервисов и рабочий e-mail.

Дизайн

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

Технологии

Как бы это ни было сложно, но HTML-код сайта старается соответствовать черновику спецификации HTML 5. Более того, пока даже получается проходить валидацию. И самое минимальное: отказ от XHTML, новый доктайп <!DOCTYPE HTML>, новая семантика языка <article>, <header>, <time>. По этой причине пока пользователи IE видят не самые приятные вещи, но почему так — чуть ниже.

Пересмотру подверглись некоторые элементы: фрагмент кода теперь состоит из элемента <pre> и <code>, по количеству строк:

<pre>
    <code></code>
    <code></code>
<pre>

…а уменьшенные версии картинок построены на элементе <figure>:

<figure>
    <dd><img src="…" alt="Описание"></dd>
    <dt>Описание</dt>
<figure>

На примеры использования таких картинок, а также работу новой версии Даркбокс, можно взглянуть в заметке Firefox против Photoshop. Ну и конечно же CSS 3: от пресловутых веб-шрифтов и border-radius до transition, из-за чего код местами распух от вендорных префиксов:

-webkit-transition:background-color .2s linear;
-moz-transition:background-color .2s linear;
-o-transition:background-color .2s linear;
transition:background-color .2s linear;

Также гораздо смелее стали использоваться селекторы: от простых E > E и E + E до E:first-of-type. К сожалению, с некоторыми конструкциями не справляется даже IE8.

Концепция

Но самое главное, чего хотелось добиться всем этим редизайном и рекодингом — это создание, так называемой, вечной беты. Весьма популярная вебдванольная концепция, надо сказать. К примеру, сейчас сайт прилично работает исключительно в последних версиях браузеров. В тех, что пораньше — сносно. А если говорить про IE, то там творится форменное безумие, которое и предстоит поправить на одном из этапов развития вечной беты. И хотя из посетителей этого сайта на долю IE приходится всего семь процентов людей и иных представителей человеческой расы, доступность для чтения нужно обеспечить всем. Та же история с версией для печати, мобильных устройств и даже микроформатами. После каждого этапа в развитии — публикация. Думаю, это будет интересно.

]]> http://pepelsbey.net/2010/01/eternal-beta/feed/ 45 Чай со спецэффектами http://pepelsbey.net/2009/12/special-effects-tea/ http://pepelsbey.net/2009/12/special-effects-tea/#comments Wed, 23 Dec 2009 21:46:35 +0000 pepelsbey http://pepelsbey.net/?p=462 Как обычные люди готовят себе чай? Довольно просто: ставят чайник, находят чашку, закидывают пакетик или даже заливают заварку. Просто и безыскусно. Сегодня я расскажу вам, как готовят чай суровые верстальщики.

Для этого вам понадобятся следующие вещи: простой текстовый редактор и свежий браузер, вроде Firefox, Opera, Safari или Chrome. Чем свежее, тем лучше — хорошо бы даже ночную сборку или какую-нибудь альфу.

Готовим основу

Для начала подготовим основу для нашего чаепития. На мой взгляд, прогрессивный HTML5-шаблон с простым доктайпом <!DOCTYPE HTML> подойдёт лучше всего:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <title>Чай со спецэффектами</title>
    <meta charset="UTF-8">
</head>
<body>
    …
</body>
</html>

Обратите внимание на атрибут lang элемента <html> — мы собираемся заваривать английский чай с американским акцентом, и его значение как раз соответствует нашему замыслу: en-US. Дальше нам это ещё пригодится.

Теперь давайте отыщем подходящую чашку. Точнее, даже не отыщем, а тут же соберём из знакомых частей. Из чего мы можем составить обычную чашку чая? Как минимум, из самой чашки cup и блюдца saucer. Чашка состоит из сосуда vessel с ручкой handle, в который последовательно налиты чай tea, брошены два кусочка сахара sugar, по вкусу, а замыкается это всё донышком bottom. Так у нас и получилось:

<div class="cup">
    <div class="vessel">
        <div class="tea">
            <div class="sugar"></div>
            <div class="sugar"></div>
            <div class="bottom"></div>
        </div>
    </div>
    <div class="handle"></div>
</div>
<div class="saucer"></div>

Итак, основа для нашего чаепития готова, начинаем его рисовать.

Раскрашиваем набросок

Теперь отбросим все браузерные условности простым ластиком. Чай у нас незамысловатый, поэтому здесь подойдёт и * { … }. Для более сложных проектов всё же рекомендуется использовать reset.css

* {
    padding:0;
    margin:0;
    }

Наступает очередь воплотить все составные части нашего чая: позиционируем их по центру, правильно расставляем z-index, задаём размеры и цвет фона для каждого элемента. Вот как выглядит чашка:

.cup {
    position:absolute;
    top:50%;
    left:50%;
    z-index:2;
    margin:-150px 0 0 -150px;
    width:300px;
    height:300px;
    }

…и получаем пример №1, он же на картинке.

Если вы остались довольны получившимся кубизмом — хорошо, значит вас устроит чаепитие даже в компании Internet Explorer. Те, кому этого мало, приглашаются дальше.

Спиливаем лишнее

И всё-таки, чашка должна быть круглой. Хотя бы для того, чтобы во время размешивания там не застревала чайная ложка. Давайте всё скруглим. После недавнего выхода альфа-версии Opera 10.50 с широкой поддержкой модуля CSS Backgrounds and Borders Level 3 для этих целей мы вполне можем рассчитывать на свойство border-radius.

Скругляем блюдце: его ширина и высота равны 500-ам пикселам, значит для того, чтобы получить окружность, радиус скругления должен составлять половину ширины, т.е. 250 пикселов:

.saucer {
    position:absolute;
    top:50%;
    left:50%;
    z-index:1;
    margin:-250px 0 0 -250px;
    width:500px;
    height:500px;
    -webkit-border-radius:250px;
    -moz-border-radius:250px;
    border-radius:250px;
    background:#FFF;
    }

В данном случае компактное правило border-radius:250px задаёт радиус скругления всех четырёх углов, точно так же, как margin:0 обнуляет поля со всех четырёх сторон элемента.

Обратите внимание на префиксы -webkit и -moz — они нужны браузерам на основе Webkit (Safari, Chrome) и Gecko (Firefox) для того, чтобы применить скругление. Последняя альфа браузера Opera обрабатывает свойство без префикса. Подобным же образом мы скругляем сосуд, чай и донышко. Ручку и подтаявшие кусочки сахара мы подтачиваем до скруглённых брусков.

И получаем пример №2, он же на картинке.

И хорошо бы: всё скруглилось, встало на свои места. Так ведь и просилась бы чашка в руки, если бы не пугала своей плоской двухмерностью. Самое время добавить немного объёма.

Надуваем чашку

Будем честны, мы здесь не пытаемся заигрывать с Canvas, поэтому объём у нас будет псевдо-трёхмерным. А много ли надо нам, жертвам квадратного и плоского веба? Берём в руки свойство box-shadow и вперёд:

.vessel {
    -webkit-box-shadow:20px 20px 100px rgba(0,0,0,.8);
    -moz-box-shadow:20px 20px 100px rgba(0,0,0,.8);
    box-shadow:20px 20px 100px rgba(0,0,0,.8);
    }

Свойство box-shadow конструируется просто: горизонтальное смещение тени, вертикальное, размер и цвет, который мы задаём в виде rgba(), чтобы последним значением указать полупрозрачность заливки. В случае с элементом tea, также используется ключевое слово inset, чтобы повернуть тень внутрь элемента.

И вот пример №3, он же на картинке.

Ну, что — чай уже почти как настоящий. За исключением некоторых проблем: тени в браузерах на движке Webkit рассчитываются весьма загадочно (см. заметку Firefox против Photoshop), поэтому, в нашем случае, выглядят более жёстко. Также текущая версия Webkit в браузере Safari 4.0.4 пока не умеет применять ключевое слово inset, однако Chrome уже справляется.

Осталось только добавить в это чаепитие немного жизни.

Художественный беспорядок

Самая очевидная проблема нашей чашки — это отвалившаяся ручка и вставшие пирамидой кусочки сахара. Давайте разбросаем всё это по своим местам и попробуем размешать сахар. Поможет нам в этом свойство transform и методы rotate() и translate(), занимающиеся, соответственно, поворотом и перемещением элементов.

Обратите внимание, что для краткости в этой части примеры кода будут приводится без дублирования свойств с префиксами -webkit, -moz и -o. Полный код вы можете найти в примерах.

Для начала, вернём ручку ровно в центр чашки, изменив значение отрицательного поля, а потом применим transform: повернём на –145 градусов и сместим на 170 пикселов.

.handle {
    margin:-20px 0 0 -45px;
    transform:rotate(-145deg) translate(170px,0);
    }

Принимаемся за кубики: их у нас ровно два. Не знаю, как для вас, но для меня это оптимальное количество сахара. И нам нужно обратиться к каждому из кубиков, чтобы применить нужное смещение. Самым удачным способом будет посчитать их по порядку появления в чае, при помощи селектора :nth-child():

.sugar:nth-child(1) {
    transform:rotate(70deg) translate(-20px,20px);
    }
.sugar:nth-child(2) {
    transform:rotate(30deg) translate(35px,0);
    }

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

.cup:hover
.sugar:nth-child(1) {
    transform:rotate(1200deg) translate(-20px,20px);
    }

А затем описываем сам процесс перемещения:

.sugar {
    transition:transform 10s ease-out;
    }

Синтаксис свойства transition простой: сначала идёт то свойство, которое мы собираемся изменять, потом время и тип ускорения, в нашем случае ease-out, что значит с замедлением. При наведении курсора на чашку .cup:hover сахар будет размешиваться по часовой стрелке, при отведении — в обратную сторону.

И вот пример №4, он же на картинке.

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

Немного разнообразия

Сколько людей, столько и вкусов. Поэтому давайте добавим нашему чаепитию возможность выбрать в какой традиции пить чай: в английской, русской или японской. Предлагаю сделать это наиболее адекватно, используя упомянутый выше атрибут lang элемента <html>. Для этого добавим возможность выбора:

<ul class="switcher">
    <li lang="en-US" title="Английски"></li>
    <li lang="ru-RU" title="Русский"></li>
    <li lang="ja-JP" title="Японский"></li>
</ul>

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

function init() {
    var html = document.documentElement;
    var items = document.querySelectorAll('ul.switcher li');
    for(var i=0; i<items.length; i++){
        items[i].onclick = function() {
            html.lang = this.lang;
        }
    }
}
window.onload = init;

В этом скрипте используется удобнейший метод querySelectorAll, который позволяет выбрать нужные элементы при помощи CSS-селекторов наподобие jQuery.

Осталось только добавить специфические стили для каждого из языков (тематическую скатерть и цвет чая) и поменять состояние текущего пункта меню. Вся магия происходит благодаря псевдо-классу :lang(), который появляется у каждого элемента после того, как мы обновили атрибут lang элемента <html>:

BODY:lang(en-US) {
    background:#519AB8 url(i/en.png);
    }
.switcher:lang(en-US) LI[lang=en-US],
.switcher:lang(ru-RU) LI[lang=ru-RU],
.switcher:lang(ja-JP) LI[lang=ja-JP] {
    border-color:#FFF;
    cursor:default;
    }

И, наконец, последний пример №5, он же на картинке. Чай готов, сахар по вкусу — можно пить :)

]]> http://pepelsbey.net/2009/12/special-effects-tea/feed/ 29 Веб-шрифты vs. Шрифты для веба http://pepelsbey.net/2009/12/web-fonts-vs-fonts-for-web/ http://pepelsbey.net/2009/12/web-fonts-vs-fonts-for-web/#comments Wed, 16 Dec 2009 13:15:49 +0000 pepelsbey http://pepelsbey.net/?p=461 Слухи о кончине этого сайта несколько преувеличены. Вашему вниманию предлагается импровизированное видео, смонтированное из слайдов и аудио-записи доклада «Веб-шрифты vs. Шрифты для веба», прозвучавшего 8 декабря на ВСТ-встрече в Москве в рамках WebHiTech Party.

Также существует полноценная видео-запись этого доклада с минской встречи Web Standards Days, однако в Москве прозвучала его улучшенная и дополненная версия, а в предложенном скринкасте гораздо удобнее следить за содержанием слайдов.

И немного о забвении: в начале года планируется выпустить новую версию этого сайта: новый дизайн, вёрстка и архитектура. Заметки станут короче и будут выходить значительно чаще. До встречи ;)

]]> http://pepelsbey.net/2009/12/web-fonts-vs-fonts-for-web/feed/ 21 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 HTML

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

html:4t  = HTML 4.01 Transitional
html:4s  = HTML 4.01 Strict
html:5   = HTML 5
html:xt  = XHTML 1.0 Transitional
html:xs  = XHTML 1.0 Strict
html:xxs = XHTML 1.1 Strict

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

<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
    <title></title>
    <meta charset="UTF-8">
</head>
<body>
    
</body>
</html>

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

bq → <blockquote></blockquote>
blockquote → <blockquote></blockquote>

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

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

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

div. → <div class=""></div>
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 теперь может быть развёрнуто с уже готовыми значениями для двух уровней русских или английских кавычек:

q:ru → quotes:'\00AB' '\00BB' '\201E' '\201C';
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/ 31 В чём мать родила 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 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:

div#name → <div id="name"></div>
div.name → <div class="name"></div> 
div.one.two → <div class="one two"></div> 
div#name.name → <div id="name" class="name"></div>

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

bq>p →
<blockquote>
   <p></p>
</blockquote>
p+p →
<p></p>
<p></p>
ul>li+li →
<ul>
   <li></li>
   <li></li>
</ul>

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

p*2 →
<p></p>
<p></p>
ul>li*2 →
<ul>
   <li></li>
   <li></li>
</ul>
dl+ →
<dl>
   <dt></dt>
   <dd></dd>
</dl>

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

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

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

div#page>h3.title+ul>li.item*3>a →
<div id="page">
   <h3 class="title"></h3>
   <ul class="menu">
      <li class="item"><a href="#"></a></li>
      <li class="item"><a href="#"></a></li>
      <li class="item"><a href="#"></a></li>
   </ul>
</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. Печать

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

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

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

font:bold italic small-caps 1em sans-serif;
font-weight:bold;
font-style:italic;
font-variant:small-caps;
font-size:1em;
font-family:sans-serif;

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

#box {
   position:absolute;
   top:1px;
   right:2px;
   bottom:3px;
   left:4px;
   padding:1px 2px 3px 4px;
   padding-top:1px;
   padding-right:2px;
   padding-bottom:3px;
   padding-left:4px;
   }

В состав пакета 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/ 59 Яндекс.Субботник в Киеве 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, всё в одном файле.

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

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

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

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

if(!$('div.darkbox-frame').length) {
    darkbox = $('<div class="darkbox-frame">…').appendTo('body');
}
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/ 37 С ножом против паровоза 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 Вашему вниманию предлагается видеозапись презентации «С ножом против паровоза», прозвучавшей на Яндекс.Субботнике в Киеве 25 апреля 2009 года. Речь в ней идёт о нарезке и оптимизации изображений для вёрстки. Длительность доклада вместе с вопросами — 58 минут, размер видео порядка 200 МБ.

Для лучшего понимания, доступен оригинал презентации: С ножом против паровоза (PDF, 4.4 МБ).

]]> http://pepelsbey.net/2009/02/with-knife-against-train/feed/ 60 Яндекс.Субботник 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