Записки самоучки

Июнь 16, 2008

В Opera 9.5 не работает с RSS

Filed under: Броузеры — 4matic @ 8:33 пп

Вышел релиз Opera 9.5. Обрадовался. Установил. В итоге обнаружил, что пропала возможность работать RSS лентами. На сайте http://www.opera.com/ не нашёл информации об обнаруженном явлении.

UPD. Ага, после запуска в первый раз я прозевал конвертацию лент и почты из старого формата в новый. Переконвертировал — все заработало.

Реклама

Июнь 12, 2008

FireBug для IE

Filed under: Броузеры,Софт — 4matic @ 1:16 дп

Вот попался на глаза плагин для IE MyDebugBar. Пока не устанавливал, но уже скачал и хочу отметить для себя ссылку на ресурс и саму программу. Так же на сайте есть утилита (браузер) IETester, с помощью которой можно эмулировать работу в IE различных версий (IE8 beta 1, IE7 IE 6 и IE5.5). Чуть разгребусь — посмотрю, что за «звери».

P.S. Вообще нет свободного времени, что бы что-то выкладывать в виде заметок в блог.

Февраль 22, 2007

Firebug не одинок. Инструменты отладки веб-программиста

Filed under: AJAX,CSS,DOM,Броузеры,Ссылки,HTML,JavaScript — 4matic @ 12:10 дп

Последнее время очень много приходится заниматься отладкой скриптов на клиенте. До недавнего времени в этом мне помогал только Firefox с расширением Firebug.

Мне очень нравится работать с Firebug`ом. Что-то лучшее сложно придумать. DOM с полной раскладкой всех атрибутов элементов страницы: можно проследить наследование атрибутов стилей и родственные связи, возможно просматривать информацию, которой обменивается клиент север при работе с AJAX. Так же есть возможность пошаговой отладки JS. Мне очень нравится возможность редактирования страницы прямо в броузере. Да еще много чего — нужно просто установить и получать удовольствие от пользования.

Не так давно «проснулась» Opera. В очередной недельной сборке, а точнее, начиная с версии 9.2 в броузере появился инструмент Developer Console. Аналог FireBug, но только для Opera, но функционал скуднее. Этим инструментом еще толком не пользовался, поэтому что-то внятно-сравнительное не могу сказать.

Немного погугилив нашел похожий инструмент и для IE. Называется этот инструмент Internet Explorer Developer Toolbar. Фукнционал крайне аскетичен и проигрует Opera, но это лучше, чем конь в ваккууме.

Что еще полезно и чем пользуюсь:

  • ieHTTPHeaders — надстройки для IE. Позволяет просматривать заголовки, которыми обменивается клиент с сервером при получении страницы или XMLHttpRequest.
  • LiveHTTPHeaders — расширение для Mozilla, аналогичное по функционалу ieHTTPHeaders.
  • Web Developer Extension — расширение для Mozilla, которое помогает получить детальное представление о странице.
  • Font Finder — расширение для Mozilla, с помощью которого можно получить список атрибутов CSS выделенного фрагмента.
  • HTML VALIDATOR (based on Tidy and OpenSP) — расширение для Mozilla, которое позволяет проверять валидность сверстанных страниц.
  • FirePHP — пока что для меня темная лошадка. Буквально на днях нашел и повода познакомиться ближе не было. Привык работать связкой <pre> + var_dump() + exit().

Пожалуй — это все, что бывает у меня в руках при отладке программ на клиенте.

Декабрь 22, 2006

У атрибутов id и name общее пространство имен в Opera`е и IE`е

Filed under: DOM,Броузеры,Глюки,HTML,JavaScript — 4matic @ 12:28 дп

Представим ситуацию. У вас сложная форма с достаточно большим количеством элементов. Для доступа к некоторым элементам в скрипте вы используете тривиальную конструкцию document.getElementById(). К своему удивлению вы обнаруживаете, что атрибуты объекта отличаются от тех, которые вы ожидаете увидеть. Возможно причина в том, что у вас совпадают значения атрибута id одного объекта и атрибута name другого объекта. Пример:

<input type=»text» name=»test» id=»bad_id»>
<input type=»button» id=»test» onclick=’alert(document.getElementById(«test»).id)’>

Так вот, если мы кликнем по кнопке, то должны получить сообщение «test». НО. Вы получите ожидаемый результат только в Firefox, а вот в Opera и IE вы получите неожиданный результат в виде сообщения «id_test».

Согласно документации getElementById() возвращает первый найденный объект с искомым id. Согласно той же документации id должен быть уникальным, а вот name может повторяться.

В примере мы делаем все правильно и получаем некорректный результат. Скорее всего проблема в том, что в Opera и IE для name и id отведено общее пространство имён. А этого быть не должно. Немного погугилив я нашёл достаточно большое количество ссылок по озвученному вопросу. Показательными я считаю вот эти две:

  1. document.getElementById() returns element with name equal to id specified
  2. Element Name vs Id

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

Как решить проблему?

Очень просто. Давать атрибутам id и name логичные значения. Ситуации, когда два разных объекта могут называться одинаково нужно еще поискать.

Если с логикой туго, то давать всем объектам уникальные id и name, уникальные в общем пространстве имен.

А еще лучше разработчикам браузеров устранить баг.

P.S. Нужно будет поэксперементировать с js-фреймворками.

Ноябрь 17, 2006

GMAIL имеет ввиду трафик пользователя, а броузеры радует безопасностью.

Filed under: Броузеры,Глюки,Это жизнь,Google,Web 2.0 — 4matic @ 2:24 пп

Попросили меня скинуть на мыло экзешный файл. Этот экзешник лежит у меня в зиповом архиве.

Открыл GMAIL, прикрепил файл на скрепку к письму. GMAIL честно перекачал файл на сервер! Причем перекачал по событию «окончание выбора файла», как только я указал файл, а не подтвердил отправку всего сообщения. Я набрал текст письма и нажал кнопку отправить письмо. И тут GMAIL огорошил меня новостью: в целях безопасности сервис не отправляет файлы в том формате, в котором хранится файл на скрепке. Точнее сказать именно с расширением exe. Я имел ввиду GMAIL и его тупую и бездарную заботу о безопасности клиентов. Я просто переименовал файл, снова зазиповал и отправил без всяких проблем. Понятно, что я потратил на повторный поиск файла, разархивирование, изменение расширения, архивирование…

Что возмутило.

  1. Сервис разрешил прикрепить файл, но запретил его отправить. (Я прекрасно понимаю, что бы узнать больше о файле — нужно его скачать.) А если бы я прикреплял файл размером в несколько десятков метров? Потратил время, трафик (читать деньги), а потом бы получил подобное «заботливое предложение»? Кто возместит убытки???
  2. Хорошо, что я знаю, что нужно поменять расширение файла, и как это сделать. А если пользователь чайник, сидит в Windows, который по умолчанию скрывает расширение файла? Все — курим бамбук. Почту в этом случае отправляем голубями.
  3. «Порадовала» безопасность броузера, которая разрешила без моего явного разрешения отправить файл на сервер. А если бы я по ошибке выбрал не тот (конфиденциальный) файл, броузер бы все равно разрешил его скачать на сервер, а GMAIL воспользовался этой возможностью, и, заботливо, по самому безопасному http протоколу закачал бы этот файл на сервер.
  4. Что за привычка проверять предмет по внешнему виду, а не по его атрибутам и другим данным? Заботитесь о безопасности клиента — проверяйте антивирусом, а не способом «от лукавого» по вторичным половым признакам.

Выводы.

  • Не отправляйте через GMAIL ничего большого на скрепках, предварительно не проверив на меньших по размеру файла, как будет отправляться содержимое скрепок.
  • Обращайте внимание, к каким файлам указываете путь в форме выбора файла. А еще лучше, что бы у тега INPUT type=file не было вообще никаких событий.
  • Когда разрабатываете пользовательский интерфейс, то ограничивайте возможности пользователя, исключая те возможности, которые приводят пользователя в тупик, а не к ожидаемому результату.

Октябрь 25, 2006

Почему я не хочу устанавливать Firefox2.0

Filed under: Броузеры,Это жизнь — 4matic @ 6:21 пп

Когда-то я поставил себе 2-ку и уменя слетели все настройки и расширения 1.5. Я глубоко не вникаю в вопросы разработки FF, поэтому я не знаю, на сколько корректно работают расширения, созданные для 1.5 в 2-ке, и работают ли они вообще. Я один раз потратил достаточно времени: установил 1.5, установил и настроил расширения. Если я перейду на 2-ку — мне опять придется тратить время. Более того, как я понял по заметкам, не весь новый функционал 2-ки лучше, чем когда этот функционал был реализован в виде расширения на 1.5. На сайте Мозиллы ссылки, которые должны вести на страницы с информацией о 2-ке почему-то ведут на версию Огнелиса 1.5.0.7. Я так и не смог ответить себе на вопросы: «Как расширения 1.5 дружат с 2.0», «Как наиболее безоблезенно перейти с 1.5 на 2.0 (сохранить настройки расширений, сохранить персональную инфу (куки, закладки, историю, RSS и т.д.))». И главный вопрос «Почему я должен переходить на 2-ку?». Ответы я так и не нашел, так что буду пользовать 1.5.0.7, пока не будет какого-то заметного дискоморта при использовании броузера — все равно я большую часть времени пользуюсь Оперой, а Лиса с расширениями — хороший помошник при написании клиентских скриптов и отладке. Проскользнула информация, что автоматическое обновление с 1.5 на 2-ку будет доступно через несколько недель. Интересно это будет обновление или будет тупо переустановка 2-ки вместо 1.5? Поживем — увидим.

P.S. Как по мне, так количество нововведений, ну, никак не тянет на 2.0. Больше похоже на погоню за цифрами или попытку хоть как-то «произнести» слово созвучное с «вебдваноль»?

UPDATE.

Я смотрю, что многие заметили «прогресс» 2ки по отношению к 1,5.

Дмитрий Честных обнаружил главную фичу 2-ки.
Влад копнул глубже и обнаружил, что некоторые расширения накрылись медным тазом.

Вот вам и расширяемость Лисы. Люди привыкли сами функционал наращивать, а теперь получается, что их лишают этой возможности. Например, очень плохо с влкадками дело обстоит. То, что прделагает 2-ка — это жалкое подобие того, что должно было быть: явное тому подтверждение расширение Tab Mix Plus. К хорошему привыкаешь быстро, а менять привычки очень тяжело.

Двойка мозилле за двойку.

Сентябрь 2, 2006

В FF нет метода click() для INPUT type=»file»

Filed under: Броузеры,Глюки,Ссылки,HTML,JavaScript — 4matic @ 12:18 пп

Если вы захотите стилизовать кнопку вызова с обзором файла на локальной машине, т.е. стилизовать элемент управления <INPUT type=»file»>, то у Вас это получится не во всех браузерах. А точнее — это не получится в Лисе (проверено на версии 1.5.0.6).

Я прогугилил варианты решения и ничего толкового не нашел. Хотя ощущается оригинальность решений. Выделить можно два.

О первом варианте вы можете получить представление на странице http://www.quirksmode.org/dom/inputfile.html Я бы назвал это решение: «Если очень нужно, то можно уже и как-нибудь». Принцип сводится к тому, что используется полная прозрачность тега INPUT который накладывается поверх дизайнерского решения. Если вы попробуете решение, а потом попробуете что-то изменить ручками в строке с адресом, то вы увидите, как все запущенно. Другими словами решать задачу на уровне представления нереально по одной причине — у каждого браузера свое представление тега <INPUT type=»file»> — говоря простым языком размеры поля ввода и кнопки могут быть разными большими/маленькими/узкими/толстыми и т.д. все зависит от операционной системы и ее настроек. В общем, если Ваш заказчик сайта топотит ногами, ничего не хочет слушать и с пеной у рта требует стилизовать стандартную кнопку — то используйте вариант, предложенный по ссылке. А когда будете показывать клиенту работу, то меняйте значение в поле только кликами мышки по кнопке «Обзор».

Второй вариант пришел сразу же мне на ум, как только я услышал о проблеме. Думаю, что вы тоже о нем сразу подумали:

<INPUT TYPE=»file» id=»filo» style=»display:none»>
<INPUT TYPE=»button» value=»Любой объект HTML, поддерживающий событие onclick()» onclick=»javascript: document.getElementById(‘filo’).click()»>

Да, решение простое, как долото. НО, это решение не работает в Лисе. Опять моя «любимая» Лиса! Я пошел на форум Мозиллы и задал вопрос. И получил ответы, из которых можно сделать выводы:

  1. Я не там искал. Я искал ответ в спецификации языка HTML, а нужно было искать в спецификации DOM, потому что эмуляция события onclick() происходит с помощью метода объекта. Так вот в спецификации по моему вопросу указано следующее:

    click
    Simulate a mouse-click. For INPUT elements whose type attribute has one of the following values: «button», «checkbox», «radio», «reset», or «submit».

    Т.е. о «file» ничего не сказано. Так же ничего не сказано об типе «image», но в Лисе тег с этим типом имеет метод click().

  2. Судя по ответам я подумал, что ситуация по моему вопросу в ближайшее время не изменится. Потому что озвученное мной решение по какой-то непонятной причине считается небезопасным. В чем опасность я так и не понял, а мне никто не объяснил. (Может, кто-то знает и молчит? Признавайтесь!!!). На форуме Мозиллы мой топик перенесли в раздел «Разработка» (что это значит — я не знаю, на форуме толком смысл этого раздела не описан — остается только догадываться).

Озвучу мысли:

  1. Нужно разделять объектную модель (элементы со свойствами и методами) и представление документа средставми языка разметки.
  2. Получается так, что остальные производители броузеров плохо разбираются в безопасности и дали доступ в своих броузерах к огромнейшей дыре, через которую можно напакостить клиенту. А то что дизайн с таким элементом управления может оказаться убогим, так это мелочь.

Я к своему неприятному удивлению обнаружил, что у меня нет локальной копии спецификации по DOM. Я нашел и скачал ее, теперь буду обязательно пользоваться. Вообщем, поживем — увидим. Надеюсь, что здравый смысл победит паранойю и всем будет счастье.

Ссылки по теме:

  1. Document Object Model (DOM) Level 2 HTML Specification (Архив ZIP для скачивания)
  2. Document Object Model (DOM) Level 2 HTML Specification (on-line спецификация)

Август 12, 2006

OPTION disabled в IE. Решение или компромис?

Filed under: Броузеры,Глюки,Это жизнь — 4matic @ 2:24 пп

Как оказалось IE — это единственный броузер, который не обрабатывает ситуацию, когда <OPTION disabled>. Я когда-то об этом слышал, но не мой мозг не принял эту информацию, как важную. Так как я человек ленивый, и времени практически нет, то я сразу же прогугилил сабж. И сразу же нашел информативную статью, которая описывает ситуацию, в которую попадет кодер, когда он решит в ИЕ организовать подобное сабжу. Адрес ссылки Select, Option, Disabled And The JavaScript Solution

Процитирую только основные моменты:

    • Суть проблемы:

    • Attempt: use the CSS pseudo :hover against the <option> element.
      Problem: Internet Explorer doesn’t support the :hover pseudo class on arbitrary elements.
    • Attempt: Wrap the contents of the <option> element in an anchor and use the :hover on that instead.
      Problem: The <select> tag is considered a replaced element, which means the tag is replaced with your operating systems equivalent. As a by product, no other HTML element is valid within the <option> tag.
    • Attempt: Use the JavaScript onmouseover and onmouseout events on the <option> element to make the element appear as though it was disabled.
      Problem: Internet Explorer doesn’t support the onmouseover and onmouseout events against an <option> element.
    • Attempt: Use the JavaScript onclick event on the <option> element to check if the disabled attribute has been applied, act accordingly if it has been.
      Problem: Again, Internet Explorer doesn’t support the onclick event againt the <option> element.
    • Attempt: Use the JavaScript onclick event against the <select> element, to again check if an <option> has the disabled attribute in use.
      Problem: Internet Explorer doesn’t support the onclick event against a <select> element.
    • Решение:
      To make this work, an event and two functions are used. They are listed here so you can glance over them:

      
      window.onload = function() {
      if (document.getElementsByTagName) {
      var s = document.getElementsByTagName("select");
      if (s.length > 0) {
      window.select_current = new Array();
      for (var i=0, select; select = s[i]; i++) {
      select.onfocus = function(){ window.select_current[this.id] = this.selectedIndex; }
      select.onchange = function(){ restore(this); }
      emulate(select);
      }
      }
      }
      }
      

      The restore function returns the selected item to its previous selection, if the newly selected item is disabled.

      
      function restore(e) {
      if (e.options[e.selectedIndex].disabled) {
      e.selectedIndex = window.select_current[e.id];
      }
      }

      The emulate function changes the font colour of all options in a <select> element with the disabled attribute set. The colours used on lines 4 and 7 are CSS2 colour names, which are considered system colours. System colours reflect what your current computer settings are, so they should change with your current desktop theme (at least that is my interpretation of it).

      
      function emulate(e) {
      for (var i=0, option; option = e.options[i]; i++) {
      if (option.disabled) {
      option.style.color = "graytext";
      }
      else {
      option.style.color = "menutext";
      }
      }
      }

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

Очень часто люди бывают невнимательными. То ли человек забегался, то ли над душой кто-то стоит, но очень часто невнимательность — это следствие уверенности в действиях, доведенных до автоматизма. Пример для понимания — данная ситуация. Человек открывает выпадающий список, видит, что некоторые элементы затенены, а некоторые нет. 50 на 50,что человек понимает, что затемненные элементы — недоступны для выбора. А, ведь, действительно — это правда: элемент в данный момент доступен для выбора. Под выбором я подразумеваю момент, когда список раскрыт, и, наведя мышь, элемент становится подсвеченным, т.е. по нему можно кликнуть и выбрать. Другими словами клиенту позволено ошибиться, что бы ошибку исправила программа. Клиент не знает, что будет дальше, он на автомате выбирает то, что ему нужно и доступно. При данном решении клиент выбирает, что ему надо; и он может не обратить внимание, что реально выбранное им значение было изменено на предыдущее.

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

Я понимаю, что автор решения хотел сделать быстрое, простое решение. Я понимаю, что данное решение может быть применено в миллионах интерфейсах, но я так же понимаю, что данное решение может вызвать большое кол-во ошибок.

Применительно к моей ситуации. Клиент отмечает строки в корзине, и выбирает, что сделать с выбранными позициями. Мой выпадающий список содержит варианты: «Удалить выбранные позиции из корзины», «Отправить выбранные позиции в заказ». Причем, в заказ нельзя отправлять товар с нулевым количеством, т.е. когда клиент отметил строки с нулевым количеством – отправка в заказ должна быть невозможной. Если я воспользуюсь вариантом, предложенным автором, то есть шанс, что позиции, которые должны быть удалены – попадут в заказ.

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

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

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

Август 10, 2006

onchange и onclick в Опере, ИЕ, Лисе

Filed under: Броузеры,Глюки,JavaScript — 4matic @ 3:45 пп

Как обычно порадовали DOMа. Работаю с элементами checkbox:

var tcb=0;//кол-во чекбоксов c true (глобальная)
function c(obj)
{
   if (obj.checked)
   {
      tcb++;
   }
   else
   {
      tcb--;
   }
   if (nr == tcb) 
   { 
      document.getElementById('allcb').checked = true; 
   } 
   else 
   { 
       if (0 == tcb) 
       { 
          document.getElementById('allcb').checked = false; 
       } 
   }
}

Так вот, событие onchange() для данного объекта есть в Лисе и Опере. В ИЕ данного события для объекта типа нет. Вернее что-то есть, но событием назвать это сложно.

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

Решение проблемы — перейти на событие onclick(), которое отлично работает во всех трех клиентах.

Версии клиентов: Opera 9.01, FF 1.5.06, IE6. Windows XP SP2

Июнь 23, 2006

В FF window.opener возвращает null

Filed under: Броузеры,Глюки — 4matic @ 7:59 дп

Не знаю почему, но я не люблю Лису. Я только ЗА OpenSource продукты, но я — не люблю Лису.

Вот недавно столкнулся с проблемой:

Opera, IE — отлично справлись с конструкцией

window.opener.document.getElementById('tmid').value

Лиса выругалась, сказав, что

window.opener это NULL

Я обратился на форум разработчика. (Что мне нравится в Лисе, так это то, что у Лисы отличный форум, где я всегда почти всегда нахожу ответы по работе с Лисой, и JS в частности). Как оказалось проблема вся в расширении, которое я установил — TBE. Это довольно таки распространенное расширение, которое расширяет возможности при работе с вкладками. После того, как я удалил это расширение — у меня все отлично заработало, но стало жалко потраченного времени на выяснение таких особенностей броузера.

Note: Ну, ладно я у себя снес это расширение и решил проблему, но как тогда быть с остальными пользователями, у которых это расширение стоИт. Скорее всего нужно будет делать отдельный слой с эмуляцией всплывающего окна.

Мысли: По-моему, создавать продукты, которые притендуют быть глобальными — это большая отвественность. В первую очередь такой продукт должен быть устойчивым. Параллели можно провести с пирамидой. В основании — догма или, что-то, что стало де-факто. Чуть выше — вещи, которые притендуют на то, что бы стать догмой, еще выше — то, в чем уверен тот, кто создает продукт, на пике то, что видно всем, что привлекает, но, то что менее всего устойчиво. Тогда больше шансов, что продукт устоит и найдет соторнников для каждого уровня пирамиды. Если поставить пирамиду пиком вниз, то констркукция окажется противоречивой — ровно на сколько оригинальна такая конструкция — ровно на столько она и устойчива. Сейчас речь не идет об ломании стереотипов и т.п. Сейчас идет речь об альтернативе уже того, что есть, и чем пользуешься.

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

Блог на WordPress.com.