^{*) На самом деле все равно сложно, но зато проще, чем было раньше.}

История началась с постановки задачи: нужно сделать анимированный баннер с примерно тридцатью объектами средствами HTML+javascript за один день. За день, конечно, баннер сделан не был, а был сделан за два усилиями трех человекодней. После выполнения задания осталась библиотека пакетной анимации, которую я назвал Scenario. О её доработанной версии я и хочу рассказать.

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

Запуск сценария из любого места предельно прост:

var newScenario = [...];
$.scenario(newScenario, {
    complete: function(time) {
        alert('Готово!');
    }
});

Осталось только разобраться, что писать вместо трех точек в примере :)

1. Включите сглаживание шрифтов

Вы за компьютером с 90-го года, ваша сетчатка деформировалась, и вы выключаете сглаживание шрифтов даже в Windows 7. Но ради бога, прежде чем сделать скриншот, включите сглаживание, .

Вы знали, что переключение раскладок придумали садисты? Ну хорошо, не садисты, а люди, которые не пользуются этим чаще, чем раз в два дня.

Операционные системы прививают нам привычку переключать раскладки клавиатуры. С русской на английскую, с английской на русскую. А кому-то еще и на украинскую, или другой язык. Кто-то пользуется сочетаниями alt-shift, кто-то ctrl-shift, кто-то еще какими-то. Неудобство испытывают все. Интернет набит вопросами, как повесить переключение раскладок на ненужную клавишу Caps Lock (одна клавиша — не две). Предлагаются различные варианты под различные операционные системы и различные окружения рабочего стола. Непременный атрибут любого рабочего стола любой операционной системы — индикатор текущей раскладки клавиатуры. Люди переключают раскладки, набирают буквы не на том языке, матерятся, переключают снова.

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

Уже очень давно у меня в браузере установлен UserJS-скрипт, позволяющий изменять размер полей ввода. Сама эта функция есть в некоторых браузерах изначально, но есть у этого скрипта один нюанс:



Да, это функция «double-click to reset dimensions». Она вызывает привыкание, и теперь на любом элементе, который возможно подвигать, я на автомате делаю даблклик в надежде, что он примет либо оптимальное, либо первоначальное положение.

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

Итак, у нас 2 картинки в формате RGBA (т.е. 3 цвета + альфаканал):

С завидной периодичностью в блоге разработчиков браузера Опера появляются сообщения, что Опера не может распарсить ту или иную страницу и пользователь видит примерно такую ошибку:



Эффект можно посмотреть по любой из этих ссылок. При этом, в других популярных браузерах страницы отображаются нормально, так же как и в Опере, если попросить распарсить документ как HTML, а не как XML (ссылка «Reparse document as HTML»).

Задача прибивания футера к низу страницы обмусолена с ног до головы. Она неплохо решается для футера фиксированной высоты. А вот для случая, когда высота футера зависит от его содержимого, методов не так много. Либо это очевидное решение на javascript. Либо подгонка для этого элементов, изначально для того не предназначенных. Я, конечно, о таблицах. Хочу предложить способ, который тоже имеет свои недостатки (обо всем ниже), но недостатки эти другие, и, следовательно, может подойти тем, кому первые два не подходят.

Казалось бы, очередной энтузиаст начал делать очередной дистрибутив на основе Linux. Разместил о нем заметку на лоре. Таких историй много. Но дело попало в руки журналистов-профессионалов.



Сайт проекта: quadregus.3dn.ru/the_site/main_page.html
Теперь автор на хабре: quadregus

UPD: Только что появилось второе видео, эпическое:

 

Думаю, все знают, что это такое. Некоторые браузеры, в частности, Фаерфокс и Интернет Эксплорер 8 рисуют однопиксельную пунктирную рамку вокруг ссылок и внутри кнопок, когда пользователь нажимает на них. Если сайт состоит из голого html, скорее всего, дискомфорта они не доставят. Но если все ссылки как-то стилизованны, вам (или вашему дизайнеру), скорее всего захочется избавиться от этого. Тем более, что эта рамка может отобразиться в неподходящем месте:

Web-шрифты на данном этапе развития невозможно применять без геморроя. Они придуманы для того, чтобы дать пользователям возможность видеть страницу такой, как её задумал автор сайта. Что на самом деле видит посетитель?

Наверняка каждый из вас делал сайт, где администратор, или даже пользователи, могу закачивать изображения, которые должны отобразится на сайте. Такие изображения можно разделить условно на 2 группы: те, которые вставляются в тело статей, скажем с помощью wysiwyg-редактора, и те, которые закачиваются в отдельное поле и потом выводятся в заранее отведенном месте. Ко вторым относятся всевозможные картинки к новостям, фотографии в фото-галереях, какие-нибудь логотипы партнеров и прочее.

И те и другие требуют какой-то обработки после размещения, но каждая группа имеет свои особенности.

С сегодняшнего дня Ютуб выдает вот такую картинку:



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

Кстати, если выделить текст на странице ctrl+a, смысл тайного послания будет понятнее:


UPD: Временное решение пришлось искать Опере софтвере: my.opera.com/chooseopera/blog/2010/04/15/youtube-fix Баг ютуба будет в скором времени исправлен.

Решил перейти на новую версию, а тут такая засада. Как известно, метод $.ajax() возвращает объект XMLHttpRequest. У этого объекта есть метод .abort(), который прерывает запрос. И вот тут и кроется отличие от предыдущих версий — раньше такой «недогруженный запрос» тихо умирал, а в новой версии срабатывает событие success и недогруженные куски кода вставляются прямо на страницу, из-за чего смотрится это все очень не аккуратно.

Что это, баг или новая фича? Как это можно обойти? Помогите найти ответ.

Нормального чейнджлога версии, который бы смог внести ясность, найти не смог. А просматривать все видео на jquery14.com в поисках ответа, сами понимаете, никуда не годится.

Материал, скорее, для начинающих верстальщиков, например таких, что работают в Microsoft ;) На тему натолкнула одна картинка с одной популярной странички:



Дело в том, что весит картинка 55 211 байт. А вот она же, но уже размером 1 764 байт. Если вы думаете, что разница в формате (у меня png, а в оригинале gif), то вы правы лишь отчасти. Попробуйте пересохранить исходное изображение в png, врядли у вас получится серьезный выигрыш (у меня размер получился 45 кб). В общем, дело не в формате.

Как известно, компания Opera готовит нам на рождество (Капитан сказал, что их рождество 25 декабря) отличный подарок, преальфу браузера версии 10.50, основным достоинством которого называется скорость.

В детстве, под новый год, я всегда пытался найти подарки, которые готовили родители. Я рылся по всем шкафам в квартире и, кажется, мне всегда это удавалось. Вот и сегодня я решил найти следы браузера Opera 10.50 в интернете :)

Таких же любопытных, как я, прошу под кат.

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

Итак, в конце ноября Bas Schouten опубликовал в своем блоге заметку о том, что он добавил в код браузера Firefox еще один графический бекенд, для работы с Direct2D. Direct2D — это новый API, призванный заменить давным давно устаревший и выкинутый из состава DirectX DirectDraw. Он работает в Windows 7 и Windows Vista, если ваш драйвер видео карты соответствует хотябы стандарту WDDM 1.0.

Замеры скорости отрисовки популярных страниц показывают, что автор старался не зря :)


В той же записи есть ссылка на скомпилированный вариант Firefox с нужными патчами, и я решил посмотреть, так ли велик выигрыш от использования Direct2D.

Тогда никто этих слов не употреблял. Не уверен, что я тогда вообще знал их значение. Впервые о проекте Владимира Кладова «Key Object Library», или просто KOL я узнал еще до института, в одном из двух выпусков журнала «Программист», которые моя мама выписала мне в честь выезда на олимпиаду по программированию в область. Статья называлась «Кол в сердце… своей программы!» Кажется в том же выпуске журнала, я впервые узнал и о .NET. Тогда, такие непомерные требования к ресурсам казались чуть ли не диверсией софтверного гиганта против IT индустрии. (До сих пор вспоминаю лабораторную друга-однокурсника, состоящую из одной формочки, запускающуюся пол минуты на кафедре на железе Celeron 433 64мб ОП из под 98-й винды. Я на той машине еще в Diablo II без тормозов играл, когда задание на пару было выполнено :)

Убедиться в этом легко, создав документ с текстом
<img src="wrong" alt="Alt"/> и открыв его в хроме. Результат будет такой.

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

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

Работая с jQuery многие рано или поздно сталкиваются с одной особенностью: когда мы хотим показать с анимацией скрытый блок, его появление может быть дерганым. Происходит это не всегда, но довольно часто. К сожалению не все разработчики знают как с этим бороться, а те кто знают, зачастую ленятся. Явный пример дерганного появления блока, можно посмотреть прямо на главной странице jQuery, нажав на кнопку Run Code: