вторник, 29 декабря 2009 г.

Используем FireBug для удобной отладки JavaScript

FireBug один из прекраснейших плагинов разработанных для FireFox. Он сочетает в себе удобство, широкий функционал и возможность написания своих дополнений. Вот уже долгое время FireBug стал для меня незаменимым помощником в веб программировании. Чего стоит возможность просмотра и редактирования html разметки, CSS стилей, мониторинг сетевых запросов и т.д. Каждый из инструментов, предоставляемый FireBug, отличается простой.

В данной статье хотел рассказать про то, как может помочь FireBug при отладке JavaScript кода, а именно про функции и возможности объекта console.

четверг, 24 декабря 2009 г.

Используем отложенную загрузку и анализ JavaScript кода

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

Например, при поиске информации, я открываю первые 5 результатов, и практически всегда, первые два результатах дают 100% информации, просматриваю конечно те страницы, которые загрузились первыми. Но, как ни странно, это может влиять и на получения прибыли от сайтов. Google констатировал, что после переработки страниц, время загрузки страницы увеличилось на 0.4 секунды для 10 и на 0.9 для 30 поисковых результатов, это привело к уменьшению поискового трафика и доход от рекламы на 20% (Linden, 2006)!

Если разобраться на что уходит время при работе с Javascript на этапе загрузки страницы, то можно выделить 3 этапа:
1. Загрузка файла/кода JavaScript
2. Анализ/разбор JavaScript кода браузером
3. Выполнения JavaScript кода на этапе загрузки страницы


Первый и второй этап в большинстве случаев и вызывают задержку. Одним из оптимизационных действий, которые рекомендуется делать, является перенос JavaScript кода в отдельные файлы и добавление ссылки на эти файлы перед закрывающимся тегом body.
<html>
  <head>
    //ваш html разметка секции head
  </head>
  <body>
    //ваш html разметка секции body
    <script type="text/javascript" src="myJavaScript.js">
    </script>
  </body>
</html>

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

При оптимизации некоторых вещей иногда думаешь, а зачем это вообще все нужно? Как оказывается, данный вопрос можно применить к JavaScript скриптам.

А почему скрипты должны загружаться и анализироваться в начале загрузки страницы? Сколько процентов кода выполняется на этапе загрузки?!

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

вторник, 15 декабря 2009 г.

jQuery tips. Часть 1. 11 моментов о которых необходимо знать

jQuery сейчас один из самых популярных javascript фреймворков, который радует нас своей простой и легкостью в использовании.

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

среда, 2 декабря 2009 г.

Добавление переводов сайта на разные языки за 5 минут. Использование панели Google Translation

В очередной раз, при просмотре статистики Google Analytics понял, что люди которые не понимают русский язык периодически заходят в мой блог, но так же быстро и уходят. Сразу хочется сказать: "Учите русский язык - пригодится!" :).

Дабы дать возможность воспользоваться информацией блога решил добавить возможность перевода страниц. В качестве такого инструмента взял панель Google Translation. Google уже подумал за нас и добавление панели занимает считанные минуты. Но внедрив это решение понял, что мне то эта панель не нужна. После небольших "потуг" родилось решение, панель необходимо отображать только пользователям у которых язык, определяемый браузером, указан не русский.

вторник, 1 декабря 2009 г.

Flex. Как правильно обработать ошибки SOAP веб-сервисов.

Программируя на Flex, как и везде, можно встретить массу интересных моментов. Иногда можно часами ломать голову о том, на что ты наткнулся: на ошибку или на фичу. Вот один из таких моментов хотелось бы описать.

Создание SOAP клиента и работа с SOAP веб-сервисами (SOAP Web Service) во Flex при использовании Flex Builder 3 - сплошное удовольствие, все делается в считанные минуты. В процессе работы с SOAP веб-сервисами в ответе вы можете получить сообщение об ошибке, тело самой ошибки будет помещено в атрибут SOAP Fault.

Для обработки ошибки добавляем слушателя события Fault.
private function onServiceFault(evt:FaultEvent): void {
   Alert.show("При получении данных произошла ошибка: " + evt.fault.faultString);
}
Но, как ни странно, при обработке ошибки во Flex приложении я получал сообщение: "HTTP request error". Оригинальное сообщение, которое было помещено в SOAP Fault в ответе веб-сервиса получить не удалось.