No public Twitter messages.


Этот блог устарел и, скорее всего, больше не будет обновляться. В ближайшем будущем он переедет сюда.
1 апреля 2013 // Веб-разработка

Элемент <nsfw>

Среди новых семантических элементов для секции, футера, хедера и т. д. HTML 5 также предлагает элемент, который может содержать в себе любой другой элемент. Он описан как Не Безопасный Для Работы (Not Safe For Work – аббревиатура nsfw).

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

Это не сугубо презентационный элемент, хоть и выполняет эту функцию по умолчанию и выглядит так:

nsfw { display: none }

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

Это работает следующим образом:

<nsfw>
<figure>
<video src="chickens.ogv" autoplay>
</video>
<figcaption>Непристойное содержимое.</figcaption>
</figure>
</nsfw>

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

Новый элемент был предложен Айеном Хиксоном, редактором спецификации HTML 5 и сотрудником Google: «Google создает специальный индекс для тех, кто при поиске использует Google SafeSearch. Учитывая то, что 72,3% веб-контента представляет собой угрозу для работы, нам необходимо это анализировать с помощью машин. Семантическая маркировка порнографии и нецензурной лексики может значительно сократить время, необходимое для создания и увеличения точности нашего индекса, и, что наиболее важно, – обеспечения защиты маленьких детей».

На текущий момент это не внедрено ни в одном браузере, хотя в последнем объявлении об IE10 компания Microsoft подтвердила, что IE10 и его поисковик Bing будут использовать для этих целей свой собственный тег вместо стандартного .

теги: ,

комментарии отключены.


9 ноября 2012 // Веб-разработка

Динамическое изменение CSS-expression через JS

Привет.

Всем давно известно, что IE до 7 версии не поддердживал CSS-свойство position: fixed; и всем также давно известно, как осуществляется совместимость — через JS внутри CSS-expression: position: absolute; top: expression(document.getElementsByTagName("body")[0].scrollTop + "px");. Казалось бы, что сейчас такие дремучие версии IE уже никому не нужны, однако, как опять же всем давно известно, существует и некий Quirks Mode, который используют некоторые крупные сервисы (Amazon, например) и при создании браузерных плагинов, которые вставляют свой код в страницу, приходится учитывать. А поскольку взаимодействие с сайтом происходит через JS, то и применять CSS-свойства приходится динамически.

Итак, столкнулся я со следующей проблемой: IE не хочет корректно обрабатывать

  1. строку с CSS-expression отправленную в св-во так:
    obj.style.top = 'expression(document.getElementsByTagName("body")[0].scrollTop + "px")';
  2. так (хотя здесь проблема в ином, IE просто не применяет ничего аттрибуту style через setAttribute):
    obj.setAttribute('style', 'top: expression(document.getElementsByTagName("body")[0].scrollTop + "px")');
  3. так:
    obj.cssText = 'top: expression(document.getElementsByTagName("body")[0].scrollTop + "px");';
  4. и даже так:
    obj.className = 'pew';
    $("<style>.pew{top: expression(document.getElementsByTagName("body")[0].scrollTop + "px";}</style>").prependTo('body');

Но потом наткнулся на гайд по экспрешнам в MSDN и нашёл там решение:

Для работы с CSS-expression у IE в объекте style есть три метода (+1 для document):

  1. setExpression(property, "expression"); — присваивание экспрешна (условие пишется в кавычках);
  2. getExpression(property); — получение строки с экспрешном;
  3. removeExpression(property); — удаление экспрешна;
  4. document.recalc(true); — перерасчёт всех динамических CSS-значений текущего документа.

Таким образом спасла меня строка obj.setExpression('top', 'document.getElementsByTagName("body")[0].scrollTop + "px"');. Пользуйтесь.

теги: , , , , , ,

комментарии отключены.


24 августа 2011 // Веб-разработка

IE Conditional comments

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

<!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->
<!--[if IE 5]>
According to the conditional comment this is Internet Explorer 5<br />
<![endif]-->
<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0<br />
<![endif]-->
<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7<br />
<![endif]-->
<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up<br />
<![endif]-->
<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6<br />
<![endif]-->
<!--[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6<br />
<![endif]-->

Всем спасибо.

теги: , , ,

6 комментариев.


8 августа 2011 // Веб-разработка

Функции для работы с Cookie на javascript

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

function getCookie( name ) {
var start = document.cookie.indexOf( name + "=" );
var len = start + name.length + 1;
if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) {
return null;
}
if ( start == -1 ) return null;
var end = document.cookie.indexOf( ';', len );
if ( end == -1 ) end = document.cookie.length;
return unescape( document.cookie.substring( len, end ) );
}

function setCookie( name, value, expires, path, domain, secure ) {
var today = new Date();
today.setTime( today.getTime() );
if ( expires ) {
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date( today.getTime() + (expires) );
document.cookie = name+'='+escape( value ) +
( ( expires ) ? ';expires='+expires_date.toGMTString() : '' ) + //expires.toGMTString()
( ( path ) ? ';path=' + path : '' ) +
( ( domain ) ? ';domain=' + domain : '' ) +
( ( secure ) ? ';secure' : '' );
}

function deleteCookie( name, path, domain ) {
if ( getCookie( name ) ) document.cookie = name + '=' +
( ( path ) ? ';path=' + path : '') +
( ( domain ) ? ';domain=' + domain : '' ) +
';expires=Thu, 01-Jan-1970 00:00:01 GMT';
}

теги: ,

1 комментарий.


1 августа 2011 // Веб-разработка

Клонирование объекта в javascript

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

var obj = { a: 1 };
var obj1 = obj;
obj1.a = 0; // при этом obj.a также становится равным 0.

Соответственно потребовалось нечто, что смогло бы создавать копию объекта без ссылки на оригинальный. После недолгого поиска было найдено решение — волшебная функция uneval (обратное от функции eval). Выглядит оно потрясающе элегантно:

function clone(o) {
return eval(uneval(o));
}

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

function clone(o) {
var obj = {};
for(var i in o){
obj[i] = o[i];
}
return obj;
}

Очевидно — немного криво, поскольку не учитывается тип входящего объекта (вдруг это массив или строка?). Протестил и опечалился, в рекурсии оно почему-то опять портит воздух. Даже после всего этого я не стал унывать и спустя выходные решение нашлось внезапно в начале рабочего дня:

function clone(o) {
return eval("("+JSON.stringify(o)+")");
}

Честно говоря плохо понимаю, что это за глобальный объект JSON и откуда он взялся (вероятно какая-то дыра в моём убогом самообразовании), но его замечательный метод stringify выполняет примерно то же, что и print_r в php. При этом этот способ вполне кроссбраузерен — протестил в IE9, FF5, Opera 11 и Chrome 11 (более ранние версии проверять лень). Придётся убить заготовку поста про мой самописный скрипт print_r для js.

P.S. Коллега подсказал функцию которую он использовал сам (с учётом всякого), может пригодиться:

function clone(obj)
{
if(obj == null || typeof(obj) != 'object')
{
return obj;
}
var temp = {};
for(var key in obj)
{
temp[key] = clone(obj[key]);
}
return temp;
}

теги: , , , , ,

5 комментариев.


19 января 2011 // Веб-разработка

position:fixed в ie6

Как известно, ie6 не поддерживает css-правило position: fixed, для иммитации существует вот такой несложный хак:

#some {
    position: fixed;
    top: 10px;
    left: 10px;
    width: 100px;
    height: 100px;
}
/* эмуляция position: fixed */
* html #some {
    position: absolute;
    top: expression(document.getElementsByTagName( 'body' )[0].scrollTop + "px");
    left: expression(document.getElementsByTagName( 'body' )[0].scrollLeft + "px");
    margin-left: 10px; /* эмуляция top: 10px; */
    margin-top: 10px; /* эмуляция left: 10px; */
}

У этого хака известен один досадный баг — из-за постоянного и очень неспешного пересчёта координат див будет постоянно дёргаться. Решается эта проблема полным сносом доктайпа со страницы. В некоторых случаях, кстати, этот костыль вообще не работает при наличии доктайпа на странице. Падений браузера и прочих критических проблем при использовании костыля не замечено.

Присутствует также ещё один минус — свойства bottom и right реализовать получится только дополнительным js-кодом. Для проектов использую jQuery, по-этому для имитации, например, bottom: 10px; вполне прокатывает конструкция $("#some").css("margin-top", ($(window).height() - 10) + "px");.

теги: , , ,

комментарии отключены.


13 января 2011 // Веб-разработка

Определяем iPad с помощью JavaScript

Поскольку моя работа в данный момент связана с проектами для московского правительства, то вполне очевидно, что без особенной поддержки таких устройств как iPad не обойтись. Нанотехнологии, инновации, Россия вперёд! Все дела, в общем. У нас на работе проблема обнаружения iPad до недавнего времени решалась грустным костылём — if($.browser.safari). Не дело.

Разумеется самый простой и адекватный способ — распарсить строку юзерагента. Выглядит она у iPad примерно так:

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10

Для определения же, создаём переменную isiPad:

var isiPad = navigator.userAgent.match(/iPad/i) != null;

Далее просто используем условие if(isiPad) или if(!isiPad).

теги: , ,

1 комментарий.


20 декабря 2010 // Веб-разработка

Определение наличия тега на странице с помощью jquery

По-скольку логичное с точки зрения кодинга if($("#id")) не катит. Делается так: if($("#id").length). Соответственно с любым другим селектором тоже катит.

Спасибо за внимание.

теги: ,

комментарии отключены.


25 октября 2010 // Веб-разработка

Немного про XSLT-преобразования

По работе последнее время всё чаще приходится решать задачи связанные с XSLT-преобразованиями. Жалко я раньше не знал какая это прекрасная штука. Краткое резюме:

XSLT — часть спецификации XSL, задающая язык преобразований XML-документов. Т.е. при наличии любого внешнего или внутреннего XML-документа (например RSS-потока или ответа какого-нибудь API) мы можем преобразовать его как нам заблагорассудится достаточно простым и прозрачным синтаксисом языка XSLT не мучая голову и сервер регулярными выражениями или языковыми функциями.

Простенький пример такого преобразования можно подсмотреть в вики.

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

Однако, есть и грустная сторона дела — крайне сложно найти адекватную литературу на русском языке (впрочем, as usual), однако я напрягся и нашел несколько весьма достойных мануалов по теме, ссылками на которые я и хочу с вами поделиться:

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

Лично для меня эта тема открыла короткий путь для работы с десятком-другим интересных API. Надеюсь и Вам такое случиться. Спасибо за внимание :)

теги: , , , ,

комментарии отключены.


19 апреля 2010 // Веб-разработка

Новое в Dreamweaver CS5

Dreamweaver CS5CSS Inspect

Рядом с Live View появилась новая кнопочка – CSS Inspect. Это такая функция, которая помогает визуально понять, где какие проблемы в CSS. В основном это связано с параметрами width/height, padding и margin. После запуска функции блоки начинают подсвечиваться при наведении на них курсора, как, например, это сделано в Opera DragonFly или FireBug. Разными цветами подсвечиваются внешний и внутренний отступы, так и высота, и ширина блока. Нажав на блок, мы можем отредактировать свойства CSS-селектора и сразу же увидеть изменения.

Site Setup

Более удобное окно настроек сайта. На первой странице только лишь название сайта и его папка. Всё остальное убрано во вкладку Advanced settings.

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

CSS Enable

функция Dreamweaver CS5 - CSS EnableУдобная и приятная функция, которая позволяет одним кликом включить или отключить (закомментировать) какое-либо свойство класса.

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

Live View Navigation

Теперь стало возможным при использовании функции Live View перемещаться по страницам сайта. Например, исправили мы класс какой, смотрим страницу и радуемся, переходим по ссылке, а там этот класс уже не так красиво смотрится, ибо иные реалии уже :)

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

Adobe BrowserLabAdobe BrowserLab

То, что все так ждали и хотели видеть. То, что уже давно реализовано в Microsoft Expression Web 3 Super Preview. Теперь, помимо живого просмотра страницы через Live View на вебките, появляется возможность посмотреть на то как сайт будет смотреться в других популярных браузерах (правда, почему-то, забыли про Оперу, как всегда), а именно – Chrome 3, FF2+, IE6+ и Safari 3+.

Не без ложки дёгтя, конечно. 1) Функционал в аналоге от Microsoft приятней, хоть и доступен там только IE и FF, впрочем как и удобство использования (на первый взгляд); 2) Эта функция реализована как плагин на Adobe AIR и работает через сервер Adobe Labs. Само собой каждый раз при использовании функции происходит загрузка страниц и много всяких лишних действий, ну и, разумеется — 3) Для тех пользователей, которые не платили за использование DW, эта функция будет недоступна.

функция Dreamweaver CS5 - PHP HintingPHP Hinting

Теперь при написании PHP-кода DW будет его понимать. Т.е. создав функцию или написав переменную DW, как любой уважающий себя IDE, будет подсказывать не только html-теги и css-свойства. Причём DW стал настолько умён, что подтягивать переменные и функции он будет даже из php-файлов привязанных к странице функцией require.

Также, DW обязуется подсказывать глобальные переменные и встроенные функции PHP, причём даже с описанием из мануала PHP.

DW CS5 Site-specific code hintingCode Hinting

Добавляет к функционалу PHP Hinting функции и полуглобальные переменные популярных фрэймворков, например, стандартно в DW CS5 вшиты функции Drupal, Joomla и WordPress (нужное выбрать во время редактирования). Включена возможность дать сжевать DW любой другой CMF и тогда DW научится понимать и его сленг.

Фильтр связанных файлов

Под открытыми вкладками в DW обычно располагается список файлов связанных с открытым во вкладке (style.css, jquery.js, custom.js, ну и всякое такое) документом.

Чем суровей наша страница, чем больше мы используем сценариев, визуальных эффектов и прочего, тем больше у нас становится связанных файлов. А когда файлов становится больше, чем может поместиться в экране, появляется противная и неудобная стрелка. В компании Adobe очень изящно решили эту задачу – добавили фильтр, указав в котором маску файлов, будут фильтроваться все неподходящие под эту маску файлы. Стандартно присутствуют три маски — *.html, *.js, *.css.

Widget Browser

Как и раньше, для меня остаётся загадкой вопрос – почему Adobe придумала свою собственную Spry, вместо того, чтобы использовать, практически ставшую стандартом, jQuery? Хотя с другой стороны, конечно, они давно уже этим занялись и негоже отступать. Adobe ведь. Ну да пофиг.

Компания Adobe написала целую кучу разных виджетов на своём этом Spry и пустила их в свободный доступ на Adobe Live Labs. Идея вообще очень интересная. С помощью этой функции можно загрузить любой из этих виджетов прямо в DW и встроить в свою страницу. Причём каждый виджет можно полностью настроить под нужды страницы, и даже сохранять настройки как пресеты. Т.е. достаточно сложнй скрипт установится полностью сам и ни разу не придётся лезть в код.

Минус тут, опять же, в том, что функция работает как аддон на Adobe AIR и работает через сервера Adobe, т.е. 1) это невозможность использования на бесплатных версиях; 2) no internet – no work.

Больше ничего серьёзного не наблюдается. Как думаете, стоит такое обновление $199?

теги: , ,

1 комментарий.



  • twitter
  • rss
  • хабр
  • жежека
  • ластфм