Различные реализации JS-движка имеют свои сильные и слабые стороны. Долгое время создание DOM-элементов через document.createElement было очень дорогой по времени операцией. Не самый лучший дизайн API требовал многословности при создании увесистой структуры из элементов с атрибутами.

var container = document.createElement("div");
var link = document.createElement("a");
link.setAttribute("href", "http://yandex.ru/");
link.setAttribute("title","Яндекс");
link.appendChild(document.createTextNode("Поиск"));
container.appendChild(link);

Этот фрагмент фактически соответствует:

<div><a href="http://yandex.ru/" title="Яндекс">Поиск</a></div>

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

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

HTML – всегда был и остается результатом сериализации древовидной структуры документа в текстовый формат, который может легко восприниматься и редактироваться человеком. Браузер, получая его на вход из файла или через поле innerHTML, разбирает его, превращая в DOM-дерево, прежде чем примется его отображать.

Современные браузеры достаточно быстро выполняют JavaScript, чтобы дать сборке фрагментов DOM-дерева через соответствующие методы API, ещё один шанс.

Синтаксический сахар

Neil Jenkins сделал «сахарок» для создания отдельных элементов и целых иерархий – Sugared DOM. Однако его код не работает в IE из-за отличной от других движков реализации метода split() у строк. Я переделал работу в этой части кода и добавил unit-тесты.

el("div");

Элементы можно создавать с установленными атрибутами id и class, используя знакомый CSS синтаксис

el("div#id.class1.class2");

Элементу можно установить другие атрибуты. Например,

el("div#id", { tabindex: -1, title: "Контейнер" });

Дочерние элементы передаются в массиве последним аргументом

var container = el("div", [
    el("a", {"href": "http://yandex.ru/", "title": "Яндекс"}, [
        "Поиск"
    ])
]);

Производительность

Тесты показывают превосходство DOM версии во всех браузерах кроме Оперы, где разница в скорости почти не заметна и Интернет Эксплорера, который всё же быстрее работает с полем innerHTML.

Ноутбуки и настольные компьютеры в настоящее время настолько мощные, что разница в скорости создания фрагментов не так уж и важна. С другой стороны, на мобильниках и планшетах – это может быть критичным. Тесты показали, что DOM версия быстрее от 45 до 100% в WebKit браузерах (браузеры в iOS устройствах и браузер по-умолчанию в Android устройствах), и примерно одинакова с innerHTML версией в Opera Mobile.

Заключение

Sugared DOM метод имеет ряд преимуществ перед шаблонизаторами:

• Прост в отладке (описание шаблона – это и есть исполняемый код).
• Не нужно дополнительно искать элементы после создания фрагмента – все ссылки на готовые элементы можно получить в процессе построения дерева.
• Не нужно беспокоиться об экранировании данных. Нулевая вероятность XSS. Текстовая стока явно преобразуется в текстовый узел DOM-дерева.
• Нет пустых текстовых узлов из-за пробелов между тегами.
• Среда разработки помогает отслеживать ошибки в таком шаблоне, так как он является обычным JS-скриптом.
• Гибкость шаблонирования обеспечивается полным доступом к объектам и функциям JS.

PS. Заметка вдохновлена статьёй Building the new AJAX mail UI part 2: Better than templates, building highly dynamic web pages

Комментарии к заметке «Шаблонирование на JavaScript»

Еще заметки со схожей тематикой

• Управляем скоростью вызова функций
• Навигация по ссылкам в списках
• Оповещение модулей через jQuery.Callbacks

Если хочется попробовать и получить некоторые плюсы от разработки в стиле БЭМ, но нет возможности внедрять всю технологическую цепочку, то стоит для начала перенять именование классов. Разумеется, это будет уже не БЭМ. Тем не мене, методом проб и ошибок ребятам из Яндекса удалось выработать хорошую методику именования CSS-селекторов.

Блок

Канонические имена блоков в БЭМ начинаются с префикса b- и отвечают на вопрос «Зачем нужен это блок?»:

.b-menu {}

Я в своей практике префикс всегда опускаю, так как лично для меня – это лишние символы не несущие никакой смысловой нагрузки.

.menu {}

Элемент

Элемент – часть блока, которая не имеет смысла вне этого блока и не может быть использована вне него.

<nav class="menu">
    <h3 class="menu__head">Menu</h3>
    <ul class="menu__list">
        <li class="menu__item">Item 1</li>
        <li class="menu__item">Item 2</li>
        <li class="menu__item">Item 3</li>
    </ul>
</nav>

Селектор элементов именуем следующим образом: .имя-блока__имя-элемента.

Модификатор

Модификатор служит для изменения внешнего вида (возможно, и поведение) блока или элемента. Селектор записывается в виде: .имя-блока_тип-модификатора_значение-модификатора или .имя-блока__имя-элемента_тип-модификатора_значение-модификатора

Назначив тегу блока или элемента класс модификатора, можно изменить его внешний вид.

<nav class="menu menu_footer">
    <h3 class="menu__head">Menu</h3>
    <ul class="menu__list">
        <li class="menu__item">Item 1</li>
        <li class="menu__item menu__item_state_current">Item 2</li>
        <li class="menu__item">Item 3</li>
    </ul>
</nav>

Модификатор menu_footer у блока menu, например, меняет размер шрифта у меню в подвале страницы

.menu { font-size: 16px; }
.menu_footer { font-size: 12px; }

А модификатор menu__item_state_current у элемента menu__item может поменять цвет фона у текущего раздела

.menu__item { background: black; color: white; }
.menu__item_state_current { background: yellow; color: black; }

Модифицировать можно и контекстом. Например, модификатор блока может влиять на элементы этого блока. Важно запомнить, что это можно делать только, если такие блоки не вкладываются друг в друга, иначе не избежать проблем со специфичностью. Так же никогда не модифицируем блок от контекста другого блока. Это лишает блок независимости.

Дополнительные материалы

• Что такое БЭМ?
• Краткое описание БЭМ

Комментарии к заметке «Верстка независимыми блоками»

Еще заметки со схожей тематикой

• Сетка из блоков фиксированных размеров
• Градиенты в Photoshop и в браузере
• Тень у полей ввода в мобильном Safari

Первое что пришло мне в голову – это пересобрать видео- и аудио-потоки в другой контейнер без перекодировки. Эксперимент закончился неудачей – полученные файлы (а были перепробованы и avi, и mpeg, и mov контейнеры) опять нормально воспроизводились, но либо не импортировались в редактор, либо видео оказывалось местами испорченное.

Тогда я решил полностью перекодировать файл с максимально возможным качеством.

ffmpeg -i 00001.MTS -copyts \
    -acodec libfaac -ar 48000 -ab 256k \
    -vcodec libx264 -crf 15 -coder 0 \
    -filter:v yadif,scale=1280:720 -r 25 \
    output.mp4

Поясню параметры, которые тут использовались:

• copyts – копирует временные метки и нужен для правильной синхронизации видео и звука;
• cfr – задает качество при однопроходном кодировании (меньше – лучше качество);
• coder 0 – отключаем CABAC так как не требуется оптимальный битрейт.

А раз происходит полная перекодировка, то я решил сразу деинтерлейсить видео и немного уменьшить размеры картинки.

Полезная документация:

• ffmpeg
• Описание ключей кодека x264

PS. Собрать свежую стабильную версию ffmpeg всегда можно с помощью Homebrew

brew install ffmpeg

Комментарии к заметке «Конвертируем AVCHD для последующей обработки»

Еще заметки со схожей тематикой

• Убираем неоднородности на повторяющейся текстуре
• Возвращаясь к проверке типа данных
• Закомментировать HTML

Допустим, контейнер имеет ширину 350px, блок – 80px и зазор между блокам – 10px.

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

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

margin-right: -10px;
position: relative; zoom: 1; /* контейнеру нужен hasLayout */

Если у контейнера есть фон, то стоит создать дополнительную обертку без фона. Увеличив ширину можно получить нежелательный эффект. А избавляться от него с помощью overflow: hidden не всегда бывает приемлемо.

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

Комментарии к заметке «Сетка из блоков фиксированных размеров»

Еще заметки со схожей тематикой

• Блоки с выноской на поля
• Верстка независимыми блоками
• Градиенты в Photoshop и в браузере

Фреймворк Underscore предоставляет два вспомогательных метода для этих целей.

function debounce(func, wait, immediate) {
    var timeout;
    return function () {
        var context = this, args = arguments;
        var later = function () {
            timeout = null;
            if (!immediate) {
                func.apply(context, args);
            }
        };
        if (immediate && !timeout) {
            func.apply(context, args);
        }
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

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

$(window).on("resize", debounce(function () {
    console.log("resize event");
}, 1000));

Пока пользователь будет менять окно в размерах, никаких сообщений в консоли не будет. Оно появится через 1 секунду после того, как он остановится.

$(window).on("resize", debounce(function () {
    console.log("resize event");
}, 1000, true));

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

function throttle(func, wait) {
    var context, args, timeout, throttling, more, result;
    var whenDone = debounce(function () {
        more = throttling = false;
    }, wait);
    return function () {
        context = this;
        args = arguments;
        var later = function () {
            timeout = null;
            if (more) {
                func.apply(context, args);
            }
            whenDone();
        };
        if (!timeout) {
            timeout = setTimeout(later, wait);
        }
        if (throttling) {
            more = true;
        } else {
            result = func.apply(context, args);
        }
        whenDone();
        throttling = true;
        return result;
    };
}

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

$(window).on("resize", throttle(function () {
    console.log("resize event");
}, 1000));

При изменении размеров окна сообщение будет выводиться в консоль ровно 1 раз в секунду.

Комментарии к заметке «Управляем скоростью вызова функций»

Еще заметки со схожей тематикой

• Шаблонирование на JavaScript
• Оповещение модулей через jQuery.Callbacks
• Улучшенный namespace

Authentication-Results: mxfront10h.mail.yandex.net; spf=softfail (mxfront10h.mail.yandex.net: transitioning domain of noteskeeper.ru does not designate 46.254.17.128 as permitted sender) smtp.mail=www-data@noteskeeper.ru

Казалось бы, правильный IP-адрес и домен, а принимающий сервер пишет, что не дозволенный отправитель. Я начал разбираться с этим вопросом и открыл для себя SPF (Sender Policy Framework), DomainKeys и DKIM (DomainKeys Identified Mail).

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

SPF

Особенностью моей ситуации было то, что вся почта обслуживается сервисом Яндекс.Почта для домена. Но и сам хост также может отправлять письма.

У меня уже была указана spf-запись, которая приводится в инструкции по настройке «Почты для домена». Мне нужно было как-то добавить IP адрес хоста в разрешенные отправители почты. Это на деле оказалось не так уж сложно:

@ IN TXT "v=spf1 a -all redirect=_spf.yandex.ru"

Эта конструкция предписывает считать хост, обозначенный записью A домена, как разрешенный и далее получить ещё дополнительные правила у Яндекса.

Синтаксис и масса других примеров описаны в документации к проекту Sender Policy Framework.

dkfilter

Я решил пойти дальше и настроить цифровую подпись всех писем, которые отсылаются с моего хоста. После недолгих поисков я нашел отличное решение для своей VPS под управлением Ubuntu — dkfilter. Не буду пересказывать принцип настройки этого фильтра. Автор достаточно подробно и точно описал, что нужно сделать.

От себя добавлю несколько изменений, которые мне потребовалось внести.

Конфигурация фильтра

Мне потребовалось руками указать домен noteskeeper.ru, так как скрипт фильтра не мог его правильно определить. Подозреваю, что это последствия какой-то ошибки конфигурирования системы. Пока я остановился на этом варианте.

Ещё я указал метод генерации подписи simple вместо nofws. Если я правильно понял, то это только влияет на то, как будет преобразован текст письма с заголовками прежде, чем будет вычислена сигнатура.

DNS-запись

В инструкции указано, что открытый ключ домена нужно вводить в формате

selector1._domainkey IN TXT "k=rsa; p=MHwwDQYJK ... OprwIDAQAB; t=y"

Из RFC 4870 я узнал, что вместо селектора selector1 может быть любая строка. Главное, чтобы такой же селектор был указан в конфигурации dkfilter.

Потом выяснилось, что тег t=y обозначает режим тестирования. Когда тестирование будет закончено, этот тег стоит убрать из записи.

sendmail

Чтобы посылать тестовые сообщения я использовал sendmail. Они, к сожалению, шли в обход фильтра. В FAQ приведены настройки, которые нужно добавить в конфигурацию postfix.

Валидируем подпись домена

Received-SPF: pass (google.com: domain of mista_k@noteskeeper.ru designates 46.254.17.128 as permitted sender) client-ip=46.254.17.128;
DomainKey-Status: good
Authentication-Results: mx.google.com; spf=pass (google.com: domain of mista_k@noteskeeper.ru designates 46.254.17.128 as permitted sender) smtp.mail=mista_k@noteskeeper.ru; domainkeys=pass header.From=mista_k@noteskeeper.ru
Received: from noteskeeper.localdomain (localhost.localdomain [127.0.0.1])
    by noteskeeper.localdomain (Postfix) with ESMTP id 997CD2A78003
    for <mistakster@gmail.com>; Mon,  9 Apr 2012 12:57:55 +0400 (MSK)
DomainKey-Signature: a=rsa-sha1; h=Received:To:Subject:Message-Id:Date:From
    b=dQHTHUU8sQCij/EDk+sv5aR8SJRuI51BBgM7LCxfihd1xNm33zUbvGo6/Csk
    spYLkwaAGGINjETWGwe0qaCZJ7AEkyZYbmNcLG2xewRGZCXyIjiygZIVyqqE
    L63lhDnwEzkG5aYyxPOQciVwmWuBExBTwNFKX0Q7p8s4eWUmyIM=;
    c=simple; d=noteskeeper.ru; q=dns; s=email

Подпись успешно проверена.

Комментарии к заметке «SPF и DomainKeys для „чайников“»

Еще заметки со схожей тематикой

• Конвертируем AVCHD для последующей обработки
• Блоговский движок под системой контроля версий Git
• Работа с тегами в Git

var subscribers = {};

function getSubscribers(id) {
    var dfd = $.Deferred(), promise = dfd.promise();
    if (typeof subscribers[id] !== "undefined") {
        subscribers[id].done(function (count) {
            dfd.resolveWith(promise, [count]);
        });
    } else {
        subscribers[id] = promise;
        $.ajax({
            url: "/subscribers",
            type: "get",
            dataType: "text",
            data: {
                id: id
            }
        })
        .done(function (count) {
            dfd.resolveWith(promise, [count]);
        });
    }
    return promise;
}

Функция вернет promise-объект, который будет разрешен, когда будет известно количество подписчиков.

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

Все последующие вызовы функции будут возвращать закешированный результат.

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

var cacheable = (function () {
    var promises = {};
    return function (opts) {
        var key = $.param({
                url: opts.url || "",
                type: (opts.type || "get").toLowerCase(),
                data: opts.data || {}
            });
        return promises[key] ? promises[key] :
                (promises[key] = $.ajax(opts).promise());
    };
}());

cacheable({
    url: "/subscribers",
    type: "get",
    dataType: "text",
    data: {
        id: id
    }
});

Комментарии к заметке «Кешируем ассинхронные запросы»

Еще заметки со схожей тематикой

• Скрываем логику проверки ответа асинхронного запроса
• Дизайн приложения с применением Deferred Object
• Deferred Object

Считаем, что запрос отработан успешно, если с сервера вернулся JSON и поле status в объект установлено в значение ok. Если там оказалось другое значение, то запрос завершился с ошибкой.

Из метода возвращаем не Deferred XHR, а новый экземпляр обычного отложенного объекта, который в дальнейшем будем «реджектить» или «резолвить».

function subscribe(objectId) {
    var dfd = $.Deferred(),
        p = dfd.promise();

    $.ajax({
        url: "/subscribe",
        type: "post",
        data: {
            objectId: objectId
        }
    }).done(function (data) {
        if (data) {
            if (data.status == "ok") {
                dfd.resolveWith(p);
            } else {
                dfd.rejectWith(p, [data.status]);
            }
        } else {
            dfd.rejectWith(p, ["wrong response"]);
        }
    }).fail(function () {
        dfd.rejectWith(p, ["communication error"]);
    });

    return p;
}

Так как логика обработки ответа отделена от логики приложения, то эта часть кода — хороший кандидат на выделение её в общий для всего приложения обработчик.

Комментарии к заметке «Скрываем логику проверки ответа асинхронного запроса»

Еще заметки со схожей тематикой

• Кешируем ассинхронные запросы
• Дизайн приложения с применением Deferred Object
• Deferred Object

В этом году я представил уважаемой публике доклад на тему «JavaScript фреймворки. Куда катится мир». Хотел опубликовать слайды к докладу вместе с видео. Но, похоже, в этом году его не будет.

Итак, слайды с комментариями или в формате PDF.

Комментарии к заметке «JavaScript фреймворки. Куда катится мир»

Еще заметки со схожей тематикой

• Позиционируем всё
• Градиенты в Photoshop и в браузере
• О пользе карты сайта

По умолчанию параметр smoothness всегда устанавливается в 100%. Но чтобы градиент стал таким же, каким его отобразит браузер, этот параметр нужно установить в 0.

Об этой особенности рассказал Олег Мохов в своем докладе на UWDC2012.

PS. В комментариях добавил иллюстрации стыкующихся градиентов.

Комментарии к заметке «Градиенты в Photoshop и в браузере»

Еще заметки со схожей тематикой

• Верстка независимыми блоками
• Сетка из блоков фиксированных размеров
• JavaScript фреймворки. Куда катится мир