программирование
Конец вечноживого Netscape
Компания AOL
Быстродействие JavaScript в браузерах
И ещё раз к теме быстродействия JavaScript. Jeff Atwood произвёл ряд
- 3d — тест на основе библиотеки работы с 3D, написанной на JavaScript (испытывается —
- быстродействие массивов и чисел с плавающей точкой)
- access — массивы, свойства объектов, доступ к переменным
- bitops — битовые операции на целых числах
- controlflow — циклы, рекурсия, условия
- crypto — криптоалгоритмы (AES, MD5, SHA1)
- date — производительность при работе с объектом «Date»
- math — различные математические операции
- regpexp — регулярные выражения
- string — работа со строками
Хуже все справился IE7, но, если не принимать во внимание операции для работы со строками, он обгонит FireFox, который сейчас занимает предпоследнее место. В комментариях есть тестирование FireFox 3 b2, вцелом он справляется на 23% лучше, чем вторая версия, но на некоторых тестах проигрывает.
ACID3 pre
Что интересно — тест ACID3 готовится к выпуску. Помимо поддержки CSS он проверяет так же и DOM. Тест пока не готов (пользоваться им нельзя, делать выводы — тоже), но лучше всего его пока проходит «Опера».
На улице верстальщиков праздник
Выдержка из статьи «IE 8: On the Path to Web Standards Compliance — ACID 2 Test Pass Complete»:
The IE dev team checked in a bunch of code that included several new features implemented in the core rendering engine that enable IE to pass the ACID 2 test!
В исходной статье есть даже видео, где можно наглядно увидеть прогресс в отображении ACID2. Бету обещают в первой половине 2008 года.
JSSS, JavaScript-based Style Sheets
В своё время, когда браузер фирмы Netscape был лидером на рынке, в нём была поддержка интересной, на мой взгляд, технологии, которая уже при рождении была незаслуженно забыта — «
Итак, в чём суть? Суть та же самая, что и в CSS, разница лишь в представлении. Несколько примеров, думаю, достаточно наглядно покажут суть:
<style type="text/javascript"><!--
// H1 { color: blue }
tags.H1.color = "blue";
// BODY { color: black; background: white }
with(tags.BODY) {
color = "black";
bgColor = "white";
}
// H1 EM .reddish { color: red }
contextual(tags.H1, tags.EM, classes.reddish.all).color = "red";
/* UL LI { color: red }
UL UL LI { color: blue } */
with(tags) {
contextual(UL, LI).color = "red";
contextual(UL, UL, LI).color = "blue";
}
// P:first-line { font-style: small-caps }
tags.P.firstLine.fontStyle = "small-caps";
// P:first-letter { font-size: 200% }
tags.P.firstLetter.fontSize *= 2; // 200%
--></style>Теперь самое интересное, вычисляемые значения и функции:
<style type="text/javascript"><!--
tags.IMG.width = .50 * document.width;
evaluate_style() {
if (visual.colorDepth < 2) {
bgColor = "white";
color = "blue";
} else {
bgColor = "black";
color = "white";
}
}
tag.BODY.apply = evaluate_style()
tag.ids.headertable.apply = evaluate_style()
--></style>MSIE6 (MuSt dIE 6.0)
Мне очень нравится проект «UpgradeBrowser», это очень разумный способ снижения доли устаревших Internet Explorer в интернете. Смысл в следующем. Вы устанавливаете у себя на сайте специальный
<!--[if lte IE 6]>
<script type="text/javascript" src="http://upgradebrowser.org/ie6fuck.js"></script>
<![endif]-->Так же код ie6fuck.js можно скачать себе и вызывать локально. Пользователи Internet Explorer 6.0 и ниже увидят сверху сайта следующую симпатичную надпись:
Через ваш устаревший и небезопасный браузер к вам могут попасть вирусы с сайтов. Обновите его!
Ссылка «обновите его» ведёт на страницу, где рассказывается о последних версиях Internet Explorer, FireFox и Opera. Чисто психологически проще поставить новую версию программы, чем переходить на её аналоги, так что на этой странице очень разумно первым упоминается Internet Explorer 7.0.
Что так же немаловажно, эту панельку можно закрыть (в оригинале справа есть крестик) и она не будет появляться ещё 30 дней. Кстати, она очень напоминает стандартную панель Internet Explorer, так что есть шанс, что многие пользователя подумают, что обновиться предлагает сам браузер.
Я код себе уже поставил, присоединяйтесь к проекту.
Easter Ogg
Из HTML5 официально исключены форматы Ogg Vorbis и Ogg Theora (предназначенные для использования проигрывания мультимедия в тегах AUDIO и VIDEO). Против формата выступали фирмы Nokia и Apple.
Напомню корень проблемы: в HTML есть стредство для внедрения рисунков и определены форматы (GIF, PNG, JPEG), которые гарантированно будут показываться во всех графических браузерах, но нет ничего подобного для видео и аудио. Нет единых форматов и средств управления проигрыванием из браузера через JavaScript. С появлением HTML5 ситуация должна быть исправлена появлением тегов VIDEO и AUDIO и введением стандартов кодеков, которые должны поддерживаться всеми браузерами.
Возможно, вместо форматов Ogg, будут использованы H.264
Так же ходят слухи, что основной причиной того, что форматы Ogg исключили, является то, что они не поддерживают DRM (средства для защиты авторских прав), это соображение возникло, большей частью
Ваш собственный OpenID
Многие думают, что OpenID — это
Что делать, если вы хотите подписываться у меня в комментариях не как «user.livejournal.com», а как «myblog.sample.com»? Наверное вам нужно будет установить себе на сайте собственный сервер OpenID? Правильно? Неправильно!
В OpenID есть интересная возможность — делегирование. Вы можете попросить другой
Вот как это выглядит для сервера myopenid.com (кстати, очень рекомендую его к использованию):
<link rel="openid.server" href="http://www.myopenid.com/server/" />
<link rel="openid.delegate" href="http://ваш_ник.myopenid.com/" />А вот так это будет выглядеть для Ya.Ru:
<link rel="openid.server" href="http://openid.yandex.ru/server.xml" />
<link rel="openid.delegate" href="http://openid.yandex.ru/users/ваш_ник" />Так, для Живого Журнала:
<link rel="openid.server" href="http://www.livejournal.com/openid/server.bml" />
<link rel="openid.delegate" href="http://ваш_ник.livejournal.com" />Для Liveinternet.ru:
<link rel="openid.server" href="http://www.liveinternet.ru/openid.php" />
<link rel="openid.delegate" href="http://http://www.liveinternet.ru/users/ваш_ник" />Для того, чтобы изготовить эту строку
Custom tags в Internet Explorer
Утверждаю и буду продолжать утверждать, что Internet Explorer — самый недооценённый браузер века интернета, а все более поздние идеи — суть калька технологий, которые в нём уже есть. Ещё одна технология, с которой я познакомился в году 1998. Тогда (впрочем, как и многие сейчас) в качестве «растяжек» для ограничения минимальной ширины контента, использовали так называемый
Способ настолько популярен, что некоторые
В те времена, как я уже говорил, существовали только две программы, имеющие право носить звание «браузера» — это Internet Explorer и Netscape Navigator. Их различия, часто, были настолько коренными (в разнице отображения, а то и названиях тегов), что изготавливались две версии сайта — под два браузера и пользователя автоматически (или предлагая выбор) перебрасывали на одну из них. В частности, такая особенность вёрстки позволяла задействовать мощности браузеров на полную силу.
Custom tag — технология в Internet Explorer, позволяющая (в определённых пределах) «придумывать» свои теги.
В Internet Explorer такой свободы нет, custom tag «работает» только в определённом пространстве имён, но есть и свои, очень существенные плюсы. Если вы не знаете, что такое пространство имён, не расстраивайтесь — на понимании сути это никак не сказывается. В следующем примере префикс «b:», с которого начинается тег и есть «пространство имён», а «xmlns:b» — его идентификатор.
Итак, в те далёкие времена я делал «растяжки» через специально придуманный custom tag «spacer», с появлением
<html xmlns:b="/">
<style type="text/css">
b\:spacer
{
display: inline-block;
width: expression(this.width+'px');
height: expression(this.height+'px');
}
</style>
Слово<b:spacer width="200" height="1"></b:spacer>Слово
</html>В примере задан тег «spacer» в пространстве имён «b» (поэтому он используется с префиксом «b:», custom tags только так и работают). Я использовал expression в CSS, чтобы свойства новоявленного тега попадали в CSS. В «Опере» такой фокус невыполним, к сожалению, хотя свойство «attr» вполне подошло бы для такой цели, но он работает только с атрибутом «content».
В тех же рамках можно усложнить поведение — добавить значения по умолчанию, новые атрибуты, можно назвать тег для экономии «b:s» , а атрибуты — «w» и «h».
Сжатие картинок
Вчера попробовал натравить инструменты для оптимизации картинок на свой каталог с картинками этого блога. Результат следующий: выигрыш составил около 10 процентов (больше всего у меня
PNG. Для сжатия PNG использовался известнейший pngcrush. Интересен в режиме «brute force» (перебора), где перебираются комбинации фильтров (фильтры — это специализированные методы сжатия, например, для градиента и т. д.). Я запускал сделующим образом: «pngcrush -brute -fix -e .png1 *.png». В итоге, все файлы png у меня в папке получают свою оптимизированную копию с расширением png1. Есть опасный момент — если у вас есть файлы APNG, pngcrush их превратит в файл без анимации. Экономия получилась порядка 7%.
JPEG. В JPEG’e особо оптимизировать нечего, формат сжатия с потерями, поэтому оптимизацию без участия человека не произвести — трудно просчитать насколько критично изменился рисунок. Оптимизировать тут нечего, но можно убрать мусор — многие программы записывают в файл комментарии, лишнюю информацию. Я использовал для чистки PureJPEG, после него прошёлся своим Photoshop Crap Remover, чтобы дочистить файл. Формат запуска PureJPEG следующий: «dir /B /S
GIF. Несмотря на то, что утилите GIFLite уже около 12 лет, мне она кажется лидером по переупаковке GIF. Утилита написана White River Software, её разработка начата ещё в 1992 году и она рабоатет под DOS, т. е. должна запускаться даже в Linux
Запускать её сложнее, чем предыдущие —
giflite.cmd — внутри по ссылке
@ECHO OFF
REM Написал Евгений «BOLK» Степанищев. 2007.
MKDIR GIFLITE.$$$ 2>nul
REM Основной цикл обработки файлов GIF
FOR /R %%N IN (*.gif) DO @CALL :method %%N
REM Удаляем весь мусор, который мог остаться
DEL /Q giflite.tmp 2>nul
RMDIR /S /Q GIFLITE.$$$
EXIT
:method
REM Перебираем методы
FOR %%M IN (0 1 2 3) DO @CALL :giflite %%M %%~s1 %1
REM Сортируем полученное по размеру и забираем последний (наименьший) файл
FOR /F "usebackq skip=3" %%R IN (`DIR /B /O-S GIFLITE.$$$`) DO @CALL :getresult %%R %1
GOTO :EOF
:getresult
REM Переписываем файл на место прежнего, удаляем мусор
MOVE /Y GIFLITE.$$$%1 %2
DEL /Q GIFLITE.$$$*.*
GOTO :EOF
:giflite
REM Запускаем преобразование
GIFLITE.EXE -t -h -m%1 -o %2 GIFLITE.$$$%1 >nul 2>nul
ИзнаСИлование программного кода
Видели
HTTP/1.1 200 OK
Date: Thu, 29 Nov 2007 18:04:09 GMT
Server: Apache/1.3.33 (Win32) PHP/5.2.0-dev
Last-Modified: Thu, 21 Jun 2007 11:27:00 GMT
ETag: "0-f702ceea-467a6084"
Accept-Ranges: bytes
Content-Length: -150810902
Connection: close
Content-Type: video/x-msvideoПопробовал. Файл 4171 мегабайт Apache 1.3.33 показал как
«Ты суслика видишь? — Нет. — И я нет. А он есть!» (фильм «ДМБ»)
До протокола HTTP, известного любому, кто бывает в интернете (для чайников — посмотрите в строку браузера, видите там «http://»?), в интернете был протокол «gopher» (с английского «суслик»). Протокол был широко распространён до изобретения World Wide Web, занимал
Протокол придумала целая команда авторов — Mark McCahill, Farhad Anklesaria, Paul Lindner, Dan Torrey и Bob Alberti из университета Минесоты
Сейчас в интернете насчитывается около 100
«Очистка» плавающих блоков
В блоге «Life Style» полезная статья «„Очистка“ плавающих блоков». Новое решение старой проблемы — плавающие блоки не растягивают внешний контейнер, которая обычно решается добавлением дополнительного элемента с «clear: both». Вкратце, рецепт выглядит следующим способом, но рекомендую взглянуть и на полную статью:
div.container {
overflow: auto;
width: 100%
}В комментариях подсказали ссылку на первоисточник: http://www.quirksmode.org/css/clearing.html.
Непрозрачное поведение Gecko
У Данила Иванова в блоге нашёл упоминание о том как лечить некорректное поведение браузеров на базе Gecko (FireFox, Camino, Flock, Seamonkey и так далее) при смене
Время от времени сталкиваюсь с бажным поведением Gecko при смене opacity. То блок не туда встанет, то скролл обнулится. Хозяйке на заметку: помогает opacity:.99
Ни разу не сталкивался, но знать о таких вещах полезно.
Анимация в вебе
Как известно, единственный формат анимированных картинок, который был доступен в вебе до недавнего времени — Animated GIF. Его недостатки общеизвестны — поддерживается только 256 цветов, нет полупрозрачности
В PNG, увы, нет анимации. Три новых формата, которые пока знакомы редкому
MNG

APNG (Animated PNG) — формат расширяющий PNG и совместимый сверху вниз. Если ваш браузер не поддерживает APNG, вы увидите просто статичную картинку. В настоящее время формат поддерживают Opera 9.50 и далёкий пока от релиза FireFox 3. Картинка выше этого абзаца — тест, поддерживает ли ваш браузер APNG. Если вы видите «Your browser does support Animated PNG», значит поддержка есть.
SVG (Scalable Vector Graphics) — относительно молодой векторный формат, который поддерживают достаточно много браузеров: Opera с восьмой версии, Safari 3 и выше, FireFox с версии 1.5, а так же все браузеры на движке Gecko, начиная с версии 1.8. Это XML формат, который для меньшего размера можно сжать алгоритмом GZip (формат SVGZ). Обычно, анимацию в SVG делают при помощи внедрённого туда EMCAScript, сменяя кадры из картинок в любом другом формате. Не совсем то, но поддерживается почти любым современным браузером, хотя в стандарте SVG есть собственные методы анимации, по этой теме можно почитать статью на несложном английском «Advanced SVG Animation Techniques».
CSS3 text-shadow
Благодаря БлоGноту узнал об официальном открытии сервиса «Я.ру», походил по ссылкам и обратил внимание, что в Opera 9.50 некоторые ссылки
Интересно, что тени
Многократные тени — впечатляющая штука
Как обычно, идея позаимствована из Internet Explrorer, там есть фильтр «drop shadow», который занимается тем же самым.
<div style="cursor:hand;height:160px; padding:10px; font:bold 13pt Verdana;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5,
Color='gray', Positive='true')">
Текст с тенью
</div>Причём, фильтр можно наложить несколько раз (добившись эффекта множественной тени), если окружить текст несколькими тегами и наложить на каждый тег по фильтру.
В лицо шрифту (@font-face)
Когда я только начинал выходить в интернет (годах в 1997—1998), обе программы, который в то время считались браузерами — Internet Explorer 4.0 и Netscape Navigator 4.0 умели показывать так называемые «embeded fonts» («внедрённые шрифты», сейчас эту технологию всё чаще называют «web fonts»). IE использовал собственный формат — EOT («Embedded Font Technology»), а компания Netscape — лицензированную у Bitstream технологию.
С помощью «внедрённых шрифтов» в браузер можно было подгружать любой специально подготовленный шрифт и писать тексты им (например, в моём родном Татарстане так делали сайты на татарском языке, ещё до введения татарского алфавита на основе кириллицы в Unicode). Причём IE позволял включать в шрифт не все буквы, а только те, которые могут понадобиться. Технологию незаслуженно ругают — говорят, что
Как обычно, то, что появляется в IE, со временем появляется и в других браузерах, только в другом виде. В данный момент «web fonts» является частью не вышедшей ещё спецификации CSS3 (впервые встречается ещё в CSS2) и уже есть браузер, который поддерживает часть возможностей — движок браузеров WebKit (на нём построен, например, браузер Safari) уже начал поддерживать правило

В CSS это всё выглядит следующим образом:
@font-face {
font-family: "Kimberley";
src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }Указывается путь до шрифта, его имя в документе и его формат («truetype»).
Weblog ping или блоги говорят
На мой взгляд, это очень здравая идея нового веба — что сайты должны обмениваться данными между собой по определённым протоколам. Самый известный — это RSS (экспорт статей сайта), чуть менее известные pingback и trackback (позволяют указать, что на статью сослались), набирающий популярность OpenID (позволяет авторизоваться на сайте пользователю другого сайта), незаслуженно забытый BLIMP (позволяет сайтам оповещать друг друга о битых ссылках).
Протокол «ping», точнее, это часть протокола
Благодаря ping я имею возможность использовать на сайте поиск Яндекса — ведь у меня есть возможность сообщить, где и что на сайте изменилось.
Как же делается ping? Надо всего лишь открыть соединение к выбранному серверу и передать по определённому URL сообщение. Имя сервера и URL можно найти в поиске или в любом списке «серверов ping для WordPress» (популярный движок блогов WordPress предоставляет пользователю возможность «пинговать» заданные сервера).
Сообщение отсылается по протоколу HTTP, методом POST, записывается в формате XML и имеет следующий (по версии Google) вид:
<?xml version="1.0"?>
<methodCall>
<methodName>weblogUpdates.extendedPing</methodName>
<params>
<param>
<value>Название вашего блога</value>
</param>
<param>
<value>URL блога</value>
</param>
<param>
<value>URL страницы, которая изменилась</value>
</param>
<param>
<value>URL RSS, RDF или Atom, к которому относится страница</value>
</param>
<param>
<value>Необязательный параметр — категория или «тег» сайта,
можно указать несколько, разделённые символом «|»</value>
</param>
</params>
</methodCall>На PHP самый простой способ всё это проделать — через Curl, хотя я формирую запрос и отсылаю его через fsockopen. Ответ часто можно и не читать, там содержится информация о том, выполнен ли запрос, но на практике это редко бывает интересно. Если не выполнен, то максимум, что вы можете сделать — это его повторить.
ECMAScript 4 people
В ECMAScript 4 (JavaScript2 будет основан на этом языке)
Проблематику все понимают? Если нет, то хотя бы попробуйте сложить 0.1 и 0.7, умножить сумму на десять и округлить вниз в любом языке, который поддерживает числа с плавающей точкой. В языке, где числа с плавающей точкой представляются в соответствии со стандартом IEEE 754 (что у вас есть под рукой? JavaScript, Perl, PHP, MySQL) вы получите число 7. Почему так происходит — тема отдельного разговора, вкратце — дело в представлении числа с плавающей точкой на машинном уровне (на самом деле результатом данной суммы, в данном случае, с точки зрения такой реализации, будет 0.7999999999999999, а не 0.8) .
Decimal — специальный тип (чаще всего можно встретить его в СУБД), который позволяет манипулировать числами с фиксированной точкой. Зафиксировав точку, можно перейти к такому хранению числа, где таких погрешностей не будет.
В EMCAScript 4 (а так же в языках, на нём основанных — ActionScript 3 и JavaScript 2) есть два способа объявить число как decimal:
{
use decimal;
var a = 0.1; // a — decimal
var b = 0.2; // b — decimal
var c = a + b; // c — decimal (0.3)
}
var a = 0.1m; // a — decimal
var b = 0.2m; // b — decimal
var c = a + b; // c == 0.3mСуффикс «m» пришёл из «C#» и расшифровывается как «money» («деньги»). В остальных языках программирования проблему обходят, работая с целыми числами. Перед выводом их просто делят на 100.
IE6 background flicker bug
На первой странице студии Артемия Лебедева сегодня была новость о сайте «Хэлплайна» с движущимся, при наведении мышки, изображением пластмассовой уточки. Сама новость мне не интересна, а решение, которое позволяло уточке двигаться я посмотрел. Как и ожидалось — сдвиг позиции фонового изображения. Но есть
Как оказалось, это решение застарелого бага IE6 с миганием фона, подложенного под ссылку. Подробное описание описание условий возникновения бага можно найти в статье «Minimize Flickering CSS Background Images in IE6». Баг заметен, если в настройках кеширования браузера выбрать «Every visit to the page» для параметра «Check for newer versions of stored pages».
Вкратце, баг чаще всего проявляется при подкладывании фоновой картинки под ссылку — фон при наведении начинает неприятно мерцать, это Internet Explorer отсылает запросы на сервер, чтобы провеить не изменилась ли картинка, которую использовали как фон. Способ, который помогает решить проблему заключается в специальном
try { document.execCommand('BackgroundImageCache', false, true);} catch(e) {}