HTMLayout от Terra Informatica

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

HTMLayout - встраиваемый браузер разработанный компанией Terra Informatica, GUI библиотека которая использует html/css для построения интерфейса с api для различных языков программирования. Используется для создания GUI "коробочного" ПО.
Документацию немного, в основном на основном сайте.
По общему впечатлению, процесс верстки напомнил мне работу с Internet Explorer 8.

Поддерживает css 2.1, частично css3 и ряд своих css конструкций (CSSS!).
Из "+" в пику основным браузерам, поддерживает свойства, параметры связанные с настройками GUI Windows. Такие как стандартные настройки и параметры темы Windows. Ширина скрола, основной шрифт системы, цвет окон и т.п.

Отдельные особенности:

• Поддержка flow и flex-units. (Реализация их в последних версиях chrome и FFox все еще имеют различия);
• Поддержка переменных css, include html файлов;
• Встроенный в css язык сценариев! Поддерживаются обработка событий, выборка dom элементов. В целом, это оправдано тем, что тогда не придется на c++ писать логику  переключения блоков верстки.

Недостатки:

• Слабая документированность;
• Различия в обработке с основными браузерами;
• Отсутствие средств отладки.

Основной способ изменения состояния интерфейса это описание логики в css. Используемый синтаксис расширен дополнительными конструкциями. Называется он CSSS! или Active CSS. Приведу некоторые примеры кода, которые проиллюстрируют его работу.

Компенсация не работающего атрибута for
<label for="elem"><input type="checkbox" id="elem"/> awesome checkbox</label>
Чтобы он заработал, необходим небольшой css код
/* Some magic: [for] not supported by default */
[for]{
hover-on!: $1(#< self.for >):hover = true;
hover-off!: $1(#< self.for >):hover = false;
active-on!: item = $1(#< self.for >), item:checked = !item:checked;
cursor: pointer;
}

Поддержка псевдокласса :checked
#elem:checked // работает
#elem + span // работает
#elem:checked + span // уже не работает

По умолчанию click event поддерживает только тег button. Выявлено опытным путем, в документации ни слова.
button{
click!: // Do something
}

Переключение блоков на странице
Требуется примитивная логика, которая позволит переключать блоки:
<button switch-view="view1">turn on View1</button>
<div view="view1" style="display: none;">...</div>
CSS:
/* View switcher */
[switch-view]{
click!:
relView = self.switch-view,
$([view]:not([view=<relView>]))::display = "none",
$([view=<relView>])::display = "block",
;
}

Вариант реализации переключения табов
button[tab]{
click!:
relTab = self.tab,
$([tab]:not([tab=<relTab>])).class = "inst_tab-item",
$1([tab=<relTab>]).class = "inst_tab-item inst_tab-active",
$([rel-tab=<relTab>])::display = "block",
$([rel-tab]:not([rel-tab=<relTab>]))::display = "none",
;
}
где
$() - функция выборки элементов по селектору
$1() - выбирает первый элемент по указанному селектору
::display - свойство display атрибута style элемента
.class - атрибут class элемента

Ссылки
http://habrahabr.ru/post/154697/
http://www.terrainformatica.com/2006/08/h-smile-core-popup-and-context-menus-htmlayout-and-sciter-engines/
http://www.terrainformatica.com/2008/02/built-in-drag-and-drop-support-in-h-smile-core/

Настройка отступов в Komodo Edit

Все настройки задаются в разделе Edit > Preferences, но для файла они могут быть переопределены в CurrentFileSettings.

Настройки находятся в группе Editor/Indetation.
Чтобы использовать табы в место пробелов ставим галочку для пункта Prefer Tab characters over spaces. Там же необходимо задать длину отступа табуляции.

Интернет банк Банка Авангарда

Небольшие детали, беглым взглядом, которые там нашел.

1) Сделан на Bitrix.
https://www.avangard.ru/bitrix/admin/index.php#authorize
2) В js коде jquery партянка. Не всегда ставят точки с запятой.
3) Таким запросом https://www.avangard.ru/ibAvn/ping/session.json можно фиксировать активную сессию юзера.
Если юзер покинул сессию, то его редиректнет на https://www.avangard.ru/ibAvn/site.jsp, а следом https://www.avangard.ru/login/www/ibank_enter.php

Ответ при активной сессии в скриншоте.

Data url изображения в Firefox-е

Обнаружил для себя интересные тулзы для фронтендера в FireFox-е. Возможность получить изображение из data url и на оборот.

Подробности в скриншотах:

Наследование в javascript

Выкладываю на всеобщее обозрение свой вариант реализации наследования в js.
Выкладки и демонстрационный пример уже доступны на https://github.com/matraska23/es5_inheritance_implementation

Реализация использует возможности Object.create() и ряд других новых методов появившихся в ES5. Поэтому в отличие от аналогичного механизма применяемого в Backbone отличается:

• объект потомка проходит проверку на instanceof для всех объектов предков (т. е. поддерживается реализация цепочки из объектов предков);
• имеется возможность для переопределения методов объекта и в вызова метода предков;
• IE8 не поддерживается (а он вам нужен?).

Код не отличается особой оригинальностью, поэтому вероятно что-то подобное вы сможете увидеть еще где-нибудь:

function inherit(Constructor, Base, extendProperties){
    var buf = Constructor.prototype;
    
    Constructor.prototype = Object.create(Base.prototype, extendProperties);
    Constructor.prototype._base = Base;
    _.extend(Constructor.prototype, buf);
    
    return Constructor;
}

Метод _.extend() осталось заменить на свою реализацию для 100% независимости от сторонних библиотек

Скользкие моменты при работе c data атрибутами в Jquery

Когда вы задаете или получаете какое-нибудь значение хранящееся в data-атрибуте DOM элемента JQuery  делает часть грязной рутинной работы за вас.
Что бы было понятно о чем речь, пример Data атрибута data-text-value

<div data-text-value="abc" id="example">...</div>

Вы можете получить значение или задать:
$("#example").data("text-value")
$("#example").data("text-value","123")

Метод $.data является оберткой над объектом dataset DOM элемента. При этом когда вы пытаетесь считать хранимое значение (строку), Jquery конвертирует значение в ближайший по смыслу тип:
"true" => true,
"123" => 123
и т.п. При этом еще кэширет значение чтобы не парится с распарсиванием в будущем.

Вот здесь и можно подскользнутся на банановой кожуре. Если через дата data атрибут задать такое число выходящее за 32 бита 83735748785296303. То можно получить что нибудь отличное, к примеру 83735748785296300. По всей видимости для приведения строки в число используется функция parseInt:
parseInt("83735748785296303")
#: 83735748785296300

Код для доказательства:

var d = document.createElement('div')
d.innerHTML = '<div data-value="83735748785296303"></div>';
$(d).data('value') == 83735748785296300

исполняемые комментарии в Internet Explorer

Обнаружил для себя новую приблуду в IE. Когда делал комит в SVN получил предупреждение, что с поставленным в js коде комментарием что-то не так. Нагуглил инфы и обнаружил,что  Interner Explorer может исполнять js код оставленный в комментариях. Код должен:

1. обернут  символами собачками `@` ;
2. между собачками и символами открывающими/закрывающими комментарии не должны быть пробелы.

Такой код выполнится в IE8, IE9, но в других будет проигнорирован:

/*@ document.body.innerHTML="123" @*/

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

Подробнее можно почитать
http://support.microsoft.com/kb/323487/en
http://stackoverflow.com/questions/3894079/multiple-js-comment-bug-in-ie