программирование

Вышел билд «Оперы» поддерживающий File I/O (файловый доступ из веб-приложения). Тег <video> и Canvas 3D, которые так же анонсировались, поддерживаются более ранними специальными билдами (в частности, <video> появился ещё восьмого ноября, год назад).

Тем не менее на «Хабре» какой-то ненаблюдательный товарищ анонсировал последние две технологии как нечто свежеобретённое, а про технологию File I/O написал буквально следующее:

Издревле повелось на Руси, что вэб-приложения имели очень ограниченный доступ к ресурсам дисковым компьютеров юзерских, что есть оправдано, с точки зрения безопасности. Это существенно ограничивало возможности Оперовских виджетов, которые и являются этими самыми вэб-приложениями. Но времена меняются, и с помощью системы File I/O теперь есть возможность безопасно работать с файлами на клиентском компе…

На Руси издревле имеется Scripting.FileSystemObject, доступный из IE, LiveConnect (позволяющий вызывать Java-методы доступа к файловой системы из JavaScript), встроенный в своё время в браузер от Netscape и XPCOM, встроенный в Mozilla (и в FireFox).

Три решения для доступа к файлам! Единственные, кто не имели интерфейсов для доступа к файловой системе — это «Опера» и «Сафари».

Итак, у нас, оказывается, есть надёжные CSS-фильтры для всех современных браузеров. О некоторых я уже писал, но перечислю все (стиль срабатывает только в указанном браузере):

<style type="text/css">
 /* только для Opera 9.50 и выше */
 noindex:-o-prefocus, tag { display: none; }

/* только для FireFox */
noindex:-moz-anylink, tag { display: none; }

/* только для FireFox /all/1623 */
@-moz-document url-prefix()
{
        tag { display: none }
}

/* только для Safari */
@media screen and (-webkit-min-device-pixel-ratio:0){
           tag { display: none }
}

xxx\:*, tag { display: none } /* только для IE */

</style>

Всё, надоело. Никто не использует VML и SVG? Почему все делают скруглённые углы только кучей картинок или через CSS3-свойства? В общем, представляю код, который работает для Opera 9.50 и выше (через SVG background), IE5.0 и выше (через VML), на FireFox 1.5, Safari3 и Konqueror (через свойства CSS3). Та-да:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<!-- подключаем пространство имён VML для IE -->
<!--[if vml]>
    <xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
    <style> v\:* { behavior: url(#default#VML); display: block; } </style>

<![endif]-->

<title>Скруглённые углы</title>

<style type="text/css">
    *    { padding: 0; margin: 0; }
    body { background: white; color: black; font: 12px Arial, sans-serif; }

    .rounded { margin: 100px auto; text-align: center; width: 50%; position: relative; padding: 10px; }

/*
Нижеприведённые background-image работает только в Opera 9.50 и представляет собой закодированный алгоритомом base64
код SVG-картинки:

<svg xmlns="http://www.w3.org/2000/svg">
<mask id="mask">
   <rect width="100%" height="100%" rx="10" ry="10" fill="white" stroke="black" stroke-width="2"/>
</mask>
<rect stroke="black" fill="white" stroke-width="4" mask="url(#mask)" width="100%" height="100%" rx="10" ry="10"/>
</svg>


В этой картинке подготавливается бакграунд со скруглёнными углами
*/
    noindex:-o-prefocus, .rounded-svg {
        background-image: url(data:image/svg+xml;base64,cюда нужно положить base64-кодированную картинку);
        border: none !important;
    }

    /* для разных браузеров указываем rounded corner через CSS3-свойство */
    .rounded-css3 {
        border: 1px solid black;
        -moz-border-radius: 1em;     /* mozilla 1.5 */
        -webkit-border-radius: 1em;  /* safari 3 */
        -khtml-border-radius: 1em;   /* Konqueror */
        border-radius: 1em;          /* CSS3 */
    }
</style>

</head>

<body >
    <!--[if vml]><v:roundrect class="rounded" strokecolor="black" strokeweight="1px" arcsize="0.25" ><![endif]-->
    <!--[if !vml]>--><div class="rounded rounded-css3 rounded-svg"><!--<![endif]-->
        <p>Вот эти ребята!</p>
    <!--[if !vml]>--></div><!--<![endif]-->
    <!--[if vml]></v:roundrect><![endif]-->
</body></html>

В коде есть несколько хаков. В частности, для «Оперы» я использую background, вставленный как SVG-изображение, через data URL. Поэтому приходится выключать border, иначе он закрывает края background. SVG закодировано в base64 (функция base64_encode в PHP), потому что оно занимает так меньше, чем в URL encoded.

Далее. Для IE включается VML, это, если кто не знает, появившаяся ещё до SVG технология построения векторных изображений. Более мощная, чем SVG, кстати. Весь VML включается через условные комментарии и другие браузеры этого безобразия не видят, в том числе их не увидит и валидатор (хотя ему и без VML тут есть на что поругаться).

Для остальных браузеров используются их префиксное свойство border-radius, которое включено в CSS3.

Движок Gecko содержит массу интересных селекторов. Вот несколько интересных селекторов, о которых мало кто знает:

For what it’s worth, development versions of Gecko have:

:-moz-broken (which would cover your :missing and :corrupt, which are not  exactly easy to tell apart). :-moz-user-disabled (user has turned off all images) :-moz-suppressed (images from the server involved are blocked) :-moz-loading :-moz-type-unsupported (for <object>s)

У меня на сайте, в комментариях широко используются юзерпики. Я уже неоднократно писал как я их показываю. Естественно, каждый сервис выдаёт юзерпики своего размера, у меня на сайте принят размер 41×41 пикселей. Ранее я ставил ширину и высоту картинки в 41 пиксель, многие неквадратные картинки искажались. Теперь этого не происходит, благодаря небольшому изменению CSS-файла:

.avatar { max-width: 41px; max-heigth; 41px }
.avatar, x\:* { max-width: auto; max-height: auto; zoom: expression(41 / Math.max(this.width, this.height)) }

Для всех браузеров, кроме IE выставлены максимальная ширина и высота картинки, в IE используется нестандартное свойство zoom, позволяющее масштабировать элемент.

У меня ощущение, что никто никогда не пробовал гонять национальные символы через WDDX из PHP в другие языки и обратно. Задача: получить от демона Perl сериализованные данные и десериализовать их. Был выбран формат WDDX, вроде как хорошо описанный стандарт и всё такое. JSON сначала не подошёл, модуль в Perl что-то там дурил, теперь мы это победили. Тем временем в WDDX…

Всё было хорошо, пока в utf8-потоке от Perl не появились символы, которые не влезают в нижнюю половину ASCII. Я перебрал автоматом все кодировки, которые знает iconv, чтобы посмотреть в какой кодировке PHP WDDX умеет есть русские буквы. Ничего ему не понравилось. Потом я догадался сериализовать utf-8 символ через функцию из PHP. Получилось что-то странное. Залез в исходники.

В общем, оказалось, что какое-то время назад кто-то постил баг по этому поводу — UTF-8 в WDDX не передавались вообще. Решили проблему очень просто — взяли кодировку как однобайтовую ISO-8859-1, закодировали в utf-8 и в таком виде выпустили в свет. При получении делается обратное преобразование:

if (!strcmp(atts[i], EL_NAME) && atts[++i] && atts[i][0]) {
    char *decoded;
    int decoded_len;
    decoded = xml_utf8_decode(atts[i], strlen(atts[i]), &decoded_len, "ISO-8859-1");
    stack->varname = decoded;
    break;
}

Соответственно, когда PHP получает из Perl нормальный UTF-8, он его пытается рассмотреть как UTF-8, который надо превратить в ISO-8859-1, на выходе мы получаем вопросы. Чтобы этого не происходило перед wddx_deserialize надо сделать iconv(’iso-8859-1’, ’utf-8’, $string), что решает проблему.

В итоге, мы перешли на JSON. Всем хорошего дня.

На днях пришлось столкнуться с кодированием русских символов в папках сервера Cyrus IMAP. Выглядит это примерно так:

folder.BC8EPQQ0BDUEOgRBBDAALQRBBDUEOgRABDUEQg-

Мне повезло, я догадался, что это модифицированная UTF-7, после раскодировки оказалось, что раскодированный текст находится в кодироке UCS-2 big endian. Получилась вот такая функция для перевода всего этого безобразия в UTF-8:

// Cyrus IMAP modified UTF-7 decode
function decodeCyrus($str)
{
    return preg_replace_callback('!&([a-z0-9+/=,]*)-!is', 'decodeCyrusHelper', $str);
}
 
function decodeCyrusHelper($m)
{
   if ($m[1] == '') return '&';
    return iconv('ucs-2be', 'utf-8', str_replace(',', '/', base64_decode($m[1])));
}

Способ использования:

<?php
$decoded = decodeCyrus('folder.BC8EPQQ0BDUEOgRBBDAALQRBBDUEOgRABDUEQg-');

У cURL есть неприятная, в некоторых случаях, особенность: при установке поля CURLOPT_POSTFIELDS, cURL устанавливает в заголовке «Expect: 100-continue». Это поле вызывает проблемы в современных версиях nginx и в некоторых старых (не знаю как сейчас ситуация обстоит) версиях lighttd.

Lighttpd выдаёт код ответа 417, а nginx (по крайней мере на HTTPS запросах) даёт паузу примерно в две секунды. Решение простое: убрать «Expect» из заголовков. В PHP это делается вот так:

curl_set_opt($connection, CURLOPT_HTTPHEADER, array('Expect:'));

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

Что-то одно PHP SOAP или Perl SOAP::Lite — делала ключница. Простая задача: общаются две программы, клиент на PHP, используется модуль SOAP и сервер на Perl, используется SOAP::Lite.

В режиме XML-RPC Perl отвечает «Неверная версия» (SOAP::Lite поддерживает только 1.1), попытки установить версию со стороны PHP (есть специальные константы SOAP_1_1 и SOAP_1_2) ни к чему не приводят, в режиме document ещё хуже — PHP начинает плеваться совершенно невразумительными сообщениями об ошибках из разряда «моя нога кефир валяться», т. е. все слова знакомые, но что бы это значило… Мануал ничего не проясняет, интернет молчит, примеры из руководства не работают. Шаманскими плясками (например, я нашёл в исходниках параметр soap_action) удалось заставить PHP замолчать, но тут уже возмущается Perl — говорит, что доступ к методу запрещён.

Есть ещё nuSOAP (написанный на чистом PHP), но этот монстр занимает более полуметра. В общем, выкинул всё, взял cURL и SimpleXML. Сам запрос — 40 строк, ещё примерно столько же — разбор ответа через SimpleXML, меньше сотни строк. Так и живём.

FireFox3 хорошеет на глазах. Не знаю насколько он хорош как средство для сёрфинга (выйдет — обязательно скачаю и посмотрю), но как браузер он, безусловно, становится всё лучше. На днях FireFox 3.1 стал проходить тесты селекторов CSS3. Хорошие новости, теперь все три основных браузера — Opera, Safari и FireFox поддерживают CSS3.

Как вы думаете, на фоне Mini Cooper «копейка» является автомобилем? С этого дня я называю «Оперу», FireFox и «Сафари» «основными браузерами», поскольку именно они и являются браузерами, а IE — «альтернативным», поскольку это политкорректное название для «куска говна с окошками», да и понимание новых стандартов у него «альтернативное». При этом я не умаляю заслуг специалистов из компании Microsoft, создавших IE6 — шедевр для тех лет, и положивших начало многим современным стандартам. Спасибо, ребята, надеюсь IE9 будет достоин тех же похвал.

Друзья, ай нид хепл.

Какие документы по стандартам кодирования PHP (кроме PEAR) вы знаете?

Многие знают, что у меня на сайте поддерживается OpenID — удобная система, позволяющая использовать логин одного сайта на других сайтах без дополнительно регистрации. Система не новая, были и более ранние аналоги, мы с другими разработчиками популярного некогда движка блогов «Регистр» задумывались о такой, но так и не сделали.

Вкратце, предположим вы зарегистрировались на любой сайте, поддерживающем OpenID, к примеру, в той же «Яруше». Чтобы оставить комментарий у меня, вам достаточно написать адреса вашей страницы на ya.ru. Т. е. ваш адрес в каком-то сервисе, где вы зарегистрированы выступает логином у меня.

Просто адреса для идентификации — это скучно, на помощь приходят аватары, маленькие картинки, идентифицирующие пользователя. В комментариях у меня теперь поддерживаются: аватары ЖЖ, аватары Яруши, Gravatar и Pavatar.

Т. е. если вы используете адрес из ЖЖ или «Яруши», то мой сайт возьмёт аватару оттуда. Gravatar и Pavatar — это два решения проблемы единых аватаров на всех сайтах. Первый — централизованный, для идентификации используется ваш адрес e-mail (если ваш сервер OpenID его показывает), второй — децентрализованный и подходит, в основом, тем, кто имеет собственный блог.

Завести свой pavatar («Personal Avatar»), если у вас есть блог, очень просто. Самый простой способ — положить в корень сайта картинку pavatar.png. Картинка должна быть размером 80x80 пикселей, не более 4Кб. Есть два способа указать альтернативное расположение — HTTP-заголовок X-Pavatar с указанием полного пути до pavatar (включая http и имя домена) и задать его в HTML тегами

<link rel="pavatar" href="URL">

или

<link rel="pavatar" href="URL" />

Pavatar должен быть изображением в форматах JPEG, GIF или PNG.

Заинтересовало изменение в новой (0.7.0) версии nginx (это довольно хороший веб-сервер, если кто-то не знает): «теперь nginx разрешает несколько строк „Host“ в заголовке запроса». Решил узнать, что за клиенты отправляют несколько заголовков «Host», оказывается, это Java-машина на некоторых «Моторолах»:

Вопрос: А в каком случае клиент может послать несколько заголовков Host?

Ответ: В случае кривого клиента. Такие, к сожалению, есть — цитата из баг-репорта:

Так вот, Java-машина на ряде аппаратов Motorola (например, K1) имеет свойство указывать в заголовке HTTP-запроса два поля Host. Причём, один из этих заголовков корректный, а второй содержит значение localhost.

Дома на ноуте у меня стоит Internet Explorer 8.0beta1. Принёс домой наш новый сайт, посмотреть как он будет смотреться под этим браузером. Гадский, гадский «Майкрософт»! Сайт (естественно) свёрстан в strict, так в этом браузере в strict режиме не работают фильтры! Естественно, CSS-свойство «opacity» там тоже не работает, так что прозрачность сделать не удаётся.

Кроме этого, не работают custom tags, что очень странно — другие-то браузеры их поддерживают. Надо будет попробовать переключить IE в режим совместимости с IE7, при помощи соответствующего meta-тега, жалко так делать, но что поделаешь — прозрачность нужна.

Ну и чтоб два раза не вставать — SVG в IE8 не будет.

Дополнение: переключение режима при помощи meta не дало результатов.

Jacob Seidelin в своём блоге «Nihilogic» опубликовал небезынтересную статью, где он рассказывает о своих экспериментах по сжатию кода JavaScript при помощи Canvas и PNG.

Идея простая, из разряда «как мне раньше не пришло это в голову». JavaScript переводится в последовательность байт, которая записывается как изображение. Изображение сохраняется в PNG-формате, в PNG используется довольно эффективное сжатие, что даже при расходах на заголовок даёт ощутимые результаты — известная библиотека Prototype (124 килобайта) стала занимать всего 30 килобайт в восьмибитном PNG-файле. Каждый пиксель в 24-битном PNG позволяет хранить три байта информации, в 8-битном формате — один.

Далее PNG-изображение загружается в тег CANVAS (нужный функционал поддерживается FireFox, WebKit/Safari и бета-версией «Оперы») и считывается попиксельно функцией getImageData, после чего полученный код выполняется (eval) и мы получаем исходный JavaScript.

Единственный недостаток метода — скорость. Извлечение скрипта в 255Кб может занять несколько секунд, что, впрочем, не всегда является проблемой.

В PHP 5.3 появился новый функционал в SPL: куча, стек, очередь и связанный список. Официальной документации по ним пока нет, но есть запись в блоге Lorenzo Alberton, на примерах показывающая что это такое и как этим пользоваться.

Хороший приём, позволяющий выровнять блок по горизонтали (работает даже в IE6, в strict-режиме):

div { margin: 0 auto; width: 100px }

Записываю себе.

Для «больших» браузеров есть разнообразные ACID-тесты (на данный момент — 3 штуки), тесты селекторов и так далее, для мобильных браузеров имеется, оказывается, собственный тест, представляет из себя 12 квадратиков, тестирующих CSS2, PNG, GZIP, HTTPS, iframe, SVG, XMLHTTPRequest, CSS Media Queries,Cavas, conenteditable и CSS3-селекторы.

Из «взрослых» моя Opera 9.50b2 частично провалила только один тест (HTTPS), FF 2.0.0.14 — три штуки (CSS media queries, CSS3 selectors и Dynamic SVG), IE7 — 8 (пройдены только CSS2, PNG, GZIP и contenteditable), Safari 3.1 провалил два теста (HTTPS и Dynamic SVG).

Небольшую подборку тестов мобильных браузеров (Blazer 4.3.2.1, PSP Netfront, Opera Mini 4.1b1, Андроид) можно увидеть в блоге Евгения Киселева.

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

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