, потому что плохо учился и не знаю ни того, ни другого, что есть нехорошо.

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]-->

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

теги: , , ,

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

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 Август 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;
}

теги: , , , , ,

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

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).

теги: , ,

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

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?

теги: , ,

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

9 Апрель 2010 // Веб-разработка

Сегодня CSS Naked Day 2010!

CSS Naked Day

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

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

теги: , , ,

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

14 Декабрь 2009 // Веб-разработка

Валидный счётчик LiveInternet

В последние годы для русскоговорящих веб-девелоперов стало почти стандартом вешать на свои сайты (помимо дефолтного во всём мире Google Analytics) счётчик LiveInternet.

Однажды, я прочитал несколько книг по веб-стандартам и немного спецификации xhtml, после чего, само собой, код стал весьма и весьма валиден. В каждом конкретном случае хотелось, чтобы этот факт подтверждал и тот самый валидатор, даже не смотря на то, что многие, как и у нас, так и на западе называют его «всего-лишь скриптом». Разумеется столкнулся я с рядом проблем возникающих от чужого кода (со своим, благо, справился без проблем), одной из главных стала валидация кода счётчика LiveInternet при доктайпе xhtml1.0 transitional. Сначала я пытался отловить проблемы в коде и создать универсальный и валидный код. Из этого ничего не вышло. Однако решение подсказал сам LiveInternet.

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

Вот он, валидный код счётчика LiveInternet на все времена:

<!--LiveInternet counter-->
<script type="text/javascript">new Image().src = "http://counter.yadro.ru/hit?r" + escape(document.referrer) + ((typeof(screen)=="undefined")?"" : ";s"+screen.width+"*"+screen.height+"*" + (screen.colorDepth?screen.colorDepth:screen.pixelDepth)) + ";u"+escape(document.URL) + ";h"+escape(document.title.substring(0,80)) + ";" +Math.random();</script>
<!--/LiveInternet-->

<!--LiveInternet logo-->
<a href="http://www.liveinternet.ru/click" target="_blank">
<img src="http://counter.yadro.ru/logo?38.2" border="0" width="31" height="31" alt="" title="LiveInternet"/>
</a>
<!--/LiveInternet-->

Всех с началом новой недели!

теги: , ,

2 комментарий(ев).


  • twitter
  • rss
  • del.icio.us
  • хабр
  • жежека
  • ластфм