Анимация при изменении названии класса в Опере

Version 9.27
Build 8841
Platform Win32
System Windows XP
Есть блок, в нём лежит анимированная картинка. Если на события onmouseover onmouseout повесить изменение класса, то сработает анимация.

<div class="test" 
  onmouseover="this.className='test test2'" 
  onmouseout="this.className='test'">
    <img src="http://bla-bla.net/smile.gif">
</div>

Template Toolkit, UTF-8 и кириллица

Мне, конечно, не хочется превращать блог в сугубо технический. Я как-нибудь напишу про экскурсии и даже выложу фотографии. Но это занимает гораздо больше времени, чем описание граблей. Оправдалась.
Так вот, если вдруг вы пишите в TT2, используете кириллическую строку и пытаетесь узнать её длину (когда Марс в Сатурне, дорогу перебежал чёрный кот), то натолкнётесь на то, что метод

[% str = "кукуруку" %]
[% str.length %]

возвратит в два раза большую длину, чем на самом деле есть.
Видимо, разработчики прогуливали уроки программирования, когда проходили кодировки.
В оригинале можно почитать у Джоела Спольски (для ленивых).
«Only the rest of the world has to jump through hoops.»
(«Только вся остальная часть мира должна перепрыгивать через обручи.»)

Этот странный IE

Если у ссылки внутренность начинается с http://

<a href="http://someurl.com" id="oLink">
    http://someurl.com</a>

и если жабаскриптом сделать так:

document.getElementById('oLink').href = 
    'http://blabla.net'

то поменяется не только src ссылки, но и её innerHTML

Вариант обхода, чтобы innerHTML не менялся: обрамить

<a href="http://someurl.com" id="oLink">
    <span>http://someurl.com</span></a>

Template Toolkit и передача переменных

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

[% BLOCK blabla %]
    [% $a = 5 %]
[% END %]
[% p = 4 %]
[% PROCESS blabla a='p' %]
[% k = 78 %]
[% PROCESS blabla a='k' %]

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

Про глупость

Не, ну я понимаю, что IE глупый, но не настолько же!
Во-первых, строку не воспринимает, как массив букв. Специально для IE нужно сделать лишнее движение в виде

str = str.split('');

Во-вторых, если у ссылки при ховере меняется фон, и если при клике на ссылку она смещается, то событие onmouseout не происходит! Приходится решать проблему с помощью JavaScript

obj.onclick = function() 
    {this.className = ''};
obj.onmouseover = function() 
    {this.className = 'hover'};
obj.onmouseout = function() 
    {this.className = ''};

Про insertAdjacentHTML в неIE

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

Вот тут реализация для FF/Netscape.

А для Chrome, Safari (WebKit) этот скрипт не работает.

Тестирование Visual Studio 2008 rus

А вы каким IDE пользуетесь?
У визуальной студии есть возможность Intellisense, которая очень полезна при работе с библиотекой jQuery. Как ее внедрить написано в статье. А еще в студии есть дебаггер для JavaScript и XSLT. Только я не пробовала, так что не знаю, насколько лучше раскрученного FireBug.
Так вот вчера побывала на закрытом тестировании Visual Studio 2008 на предмет локализации. Тестировать в общем-то было нечего. Раздел «Веб-разработка», а также документация по XML/XSLT были на английском. Надеюсь, к выпуску исправят.
Полезно прочитать перевод статьи из МСДНа.

Citius, altius, fortius!

Надо было реализовать фильтрацию точек на карте (Google Maps) и выводить их в таблицу. При изменении видимости этих точек меняется и сама таблица. При изменении вывода таблицы (сортировка, количество результатов на страницу) изменяется область видимости на карте. Да чего тут объяснять, проще посмотреть аналог.
Какая была радость, когда черновой вариант заработал! Теперь надо сделать быстрее и лучше.

Удивительное рядом

Обладеть, мне жабаскрипт отладчик сообщил об ошибке : «Неправильный указатель» и «Stack overflow».
Про overflow ещё в Tales from the Evil Empire

Все свойства объекта

function dumpProps(obj, parent) {
 // Go through all the properties of 
 // the passed-in object
 for (var i in obj) {
    // if a parent (2nd parameter) was passed
    // in, then use that to
    // build the message. Message includes 
    // i (the object's property name)
    // then the object's property value 
    // on a new line
    if (parent) { var msg = parent + "." 
              + i + "\n" + obj[i]; } 
    else { var msg = i + "\n" + obj[i]; }
    // Display the message. If the user 
    // clicks "OK", then continue. If they
    // click "CANCEL" then quit this 
    // level of recursion
    if (!confirm(msg)) { return; }
    // If this property (i) is an object, 
    // then recursively process the object
    if (typeof obj[i] == "object") {
       if (parent) { dumpProps(obj[i], parent 
              + "." + i); } 
    else { dumpProps(obj[i], i); }
    }
 }
}

Донор

Select или drop-dawn list

В IE6 вообще с селектами плохо. Z-index'а нет, изменить цвет границ нельзя, и вообще элемент неприкосновенный. А тут задача наипростейшая: сделать выделенным пункт в выпадающем списке. Казалось бы:

$("select[name='hotels' option[value=23456]").
                 attr('selected', 'selected');

Не работает. Только в IE6.
Просмотрев интернет два дня, меня осенило:

$("select[name='hotels']").focus();
$("select[name='hotels' option[value=23456]").
                 attr('selected', 'selected');

Работает. Везде. Даже в IE7

jQuery &(vs) Prototype

Есть проект, на клиенте все написано на prototype, на сервере — Java, между ними — DWR. И вот кто-то решил в проект интегрировать дерево на jQuery. При чем в это дерево должны дропать prototype'овские объекты.
Не надо меня посылать. Я там уже была.
Реально ли это сделать?

Не более трёх раз...

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

По теме: ТОП 10 самых раздражающих факторов для программиста

Жабаскрипт

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

0. Допустим, надо создать класс EarthMap (Форосу привет):

    function EarthMap() {
    ...
    }

Тогда для того, чтобы вызвать метод экземпляра класса, нужно написать что-то вроде этого:

    this.activate();

Но довольно часто возникает ситуация, когда this - это не экземпляр класса, а объект DOM, например ссылка или картинка, на которую кликнули.
Из этой двойственной ситуации поможет выйти вспомогательный объект:

    thisClass = this;

И тогда в дальнейшем метод вызывать, как

    thisClass.activate();

1. У JavaScript атрофированные возможности работы с массивами. Нет поиска по массиву, нет добавления элемента на нужную позицию, то же самое с удалением. Поэтому используются объекты. Но и там нас ждет разочарование.
Создаем объект:

    var groups = {
       32: "Алмата",
       40: "Белгород",
       ...
       39: "Черновцы"
    }

Где-нибудь дальше в скрипте мы этот объект изменяем: удаляем, добавляем значения. И где-нибудь нужно узнать, пуст ли он или сколько в нем значений. Чтобы узнать это, придется написать функцию:

    // пустой ли объект
    this.isEmptyObject = function(obj)
    {
        var empty = true;
        for (i in obj)
        {
            empty = false;
            break;
        }
        return empty;
    }

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

Системная Венгерская

Джоел Спольски написал простые истины программирования:
• Делайте функции короткими.
• Объявляйте ваши переменные насколько возможно близко к тому месту, где вы будете их использовать.
• Не используйте макросы для того, чтобы создать свой собственный личный язык программирования.
• Не используйте goto.
• Не помещайте закрывающую фигурную скобку дальше, чем на один экран от соответствующей открывающей скобки.

Вдобавок выяснилось, что венгерская нотация или Системная Венгерская для моих javascript'овых функций помогла бы выявлять типы переменных на месте, так как в java script тип можно не определять при инициализации.

mootools

Сайт красивый, а ты сослался на болезнь и занудным образом не согласился. Красота не в цветах, а в удобстве подачи информации. Не нравится анимация? А мне не нравятся стереотипы, созданные Лебедевым. Ссылки должны быть подчеркнутыми, висячая пунктуация и мат через два слова. Снобизм.