вторник, 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 в ответе веб-сервиса получить не удалось.

среда, 25 ноября 2009 г.

Выполняем HTML или JavaScript код используя адресную строку

Иногда возникает потребность увидеть результат выполнения какого-то HTML или Javascipt кода без внедрения его на страницу. Например, вы желаете увидеть как будет выглядеть плеер на видео с Youtube до внедрения его на свой сайт. Пример не очень хороший, но наглядно демонстрирует функционал.

Для того что бы отобразить html или обработать javascript код вам необходимо добавить к вашему коду строку "data:text/html," и получившийся результат, выполнить. Рассмотрим это на примере видео из Youtube.

пятница, 13 ноября 2009 г.

Компилируем flex-htmlfilter в Windows за 10 минут

При программировании на Flex обращаешь внимание на разные библиотеки, одним из таких проектов, который привлек мое внимание, стал flex-htmlfilter. Он дает возможность поддержки дополнительный html тегов: ul, ol, table и т.д. Полный список тегов можно найти на сайте проекта.

Посмотрев пример использования стало понятно, что нужно "пощупать" его поплотнее. Правда скомпилировать его из исходников оказалось не очень просто, на что и ушло уйма времени. Дальше о том как это сделать :).

вторник, 10 ноября 2009 г.

Как изменить размер изображений не потеряв в качестве используя CSS

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

Например, у вас была картинка 300x200, а необходимо получить размер 120x120.

суббота, 7 ноября 2009 г.

Быстро и удобно. Отслеживаем переходы и скачивания файлов на своем сайте с использованием Google Analytics

У вас возникла задача отслеживать переходы и скачивания файлов? В этом вам поможет Google Analytics(видео по регистрация акаунта). Если вы уже используете данный продукт на вашем сайте, то вам осталось для выполнения этой задачи всего "полшага".

По сути, Google Analytics предоставляет возможность для выполнения отслеживаний. Чтобы воспользоваться ими вам необходимо добавить javascript-овое событие onclick в ссылку.

<a href="http://mysite.com/files/logo.jpg" onClick="javascript: pageTracker._trackPageview(’/download/logo’);">click me</a>

Прописывать событие "onclick" возле каждой ссылке очень неудобно. Вот об упрощении работы и пойдет дальше речь.

среда, 28 октября 2009 г.

Django+Eclipse. Autoreload Django сервера в Debug режиме.

При работе Eclipse+Django(как начать работать было описано в статье Интелисенс Eclipse в Django проектах) я столкнулся с проблемой в том, что при изменении файла настроек приходилось перезапускать сервер для применения изменений.

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

Больше всего возмутила не сама проблема, а бестолковые ответы, это и дало неплохой стимул для поиска решений. Через 30 минут я наткнулся на одно интересное решение "How to debug django web application with autoreload.", которое было основано на возможности удаленной отладки PyDev. Комментарий добавил в форум, а сейчас хотел бы написать о полном цикле решения этой проблемы, про это и пойдет дальше речь.

суббота, 24 октября 2009 г.

Ошибка в IE: "Предполагается наличие идентификатора, строки или числа"

При написании модуля для асинхронной загрузке поста, у меня возникала ошибка javascript в IE, об этом я подробно изложил в посте Прокачка блога Blogger. Асинхронная загрузка постов. Много людей уже зашли на эту страницу в поисках решений данной проблемы, как не странно, они сразу же уходят. Скорей всего решение они просто не увидели, по этой причине напишу этот краткий пост :).

В моем случае ошибка "Предполагается наличие идентификатора, строки или числа" в IE на уровне javascript возникла из-за того, что данный браузер "щепетильный" и предполагает, что в конце списка не должно быть запятых.

javascript в котором возникает ошибка
default_settings = {
older_link: "a.blog-pager-older-link", 
}


javascript в котором НЕ возникает ошибка
default_settings = {
older_link: "a.blog-pager-older-link"
}

пятница, 23 октября 2009 г.

Мифы и реальность. Повышаем производительность ActionScript3 при работе с числами

Изучая язык программирования, важно знать тонкости и недостатки. Одним из моментов, на которые необходимо обращать свое внимание, это производительность. Так как же улучшить производительность во Flex приложениях?

По данной теме можно найти массу рекомендации, как на сайте разработчиков Adobe(Flex Application Performance: Tips and Techniques for Improving Flex Server Performance), так и просто в статьях блогеров.

При изучении второго сегмента статей по производительности, у меня возникло некоторое замешательство. Например, в одном из постов приведены сравнения двух разных вариантов одной операции, первый выполнялся за 15мс, второй за 8мс, и было указано, что второй быстрее на 66%. Взглянув мельком на цифры, промелькнула мысль: "Первый выполнялся почти в 2 раза быстрее, откуда 66%?". Пересчитал, 15/8*100%-100%=87.5%, эти цифры вызвали удивление. При этом встречаются ошибки в которых значение на порядок больше, чем расчетное. Бездумные перепосты таких данных встречаются и на русском языке, что довольно таки печально :(. А если ошибки были допущены не только в вычислениях?! Дальше пойдет речь о моих экспериментах в тестировании производительности с числовыми типами данных.

суббота, 17 октября 2009 г.

Быстро и удобно. Экранирование символов.

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

При использовании плагина (про него я уже писал "Прокачка блога Blogger. Асинхронная загрузка постов."), который позволяет динамически подгружать предыдущие посты, при написании статей в мои действия добавилась одна особенность. Текст программных частей помещенных в посты, которые попадают в общую ленту блога, должен быть помещен с экранирование символов "<", ">".

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

вторник, 13 октября 2009 г.

Быстро и удобно. Hibernate Сriteria по связанным сущностям.

Hibernate как ORM очень гибкий и универсальный инструмент. При разработке на его основе испытываешь удовольствие, но как в каждом продукте есть свои неудобные моменты. Один из тех моментов, которые периодически раздражают, - это отсутствие удобного механизма по добавлению критериев по связанным объектам через Criteria API.

Рассмотрим подобную ситуацию на примере. Имеются классы Company, Address, Product, Customer связанный между собой. Данная модель может вам не нравиться, но она лишь написана для того, чтобы продемонстрировать проблему.

public class Product {
 
 public Long id;
 public String name;
 public String description;
 public Company company;
 public Set<Customer> customers = new HashSet<Customer>();

}

public class Company {

 public Long id;
 public String name;
 public Address address;
 public Set<Product> products = new HashSet<Product>();

}

public class Address {

 public Long id;
 public String name;
 public Set<Company> companies = new HashSet<Company>();

}

public class Customer {

 public Long id;
 public Set<Product> products = new HashSet<Product>();

}

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

Criteria cr = session.CreateCriteria(Customer.class);
cr.createCriteria("products").createCriteria("company").createCriteria("address").add(Restrictions.like("name", "%Москва%"));

При этом существуют некоторые ограничения. Например, если вы в переменную cr попытаетесь еще добавить критерий по описанию продукта вот таким вот образом:
cr.createCriteria("products").add(Restrictions.like("description", "вафли%"))
В результате возникнет исключение "duplicate association path" :(. А что делать, если такой критерий собирается динамически?

Так как же можно упростить добавление критерия, вызвав добавление связки только один раз "products.company.address" и при этом еще избежать дублирования при добавлении критерия "products"?

воскресенье, 11 октября 2009 г.

Тестирование Django в Eclipse

Тестирование в Django очень хорошо продумано, и при дальнейшей разработке позволяет быстро выявлять ошибки. После рефакторинга, проверив тесты, вы получаете уверенность и облегчение в том, что не возникло каких то ошибок, ну это при условии того, что у вас покрыт весь код тестами :).

Вы можете писать как Doctest, так и Unit test. Подробности того, как писать тесты, какие части приложения необходимо тестировать и т.д. очень хорошо раскрыты на сайте проекта Django.

Если вас интересует как начать работать с Django+Eclipse, то прочитайте мою предыдущую статью о "Интелисенс Eclipse в Django проектах", в ней найдете описание того, что нужно сделать и какие проблемы возникают в начале работы.

И вот вы уже написали в каждом app тесты, поместив их или в файл tests.py или models.py. Что делать дальше?

воскресенье, 4 октября 2009 г.

Выключаем все эффекты jQuery

При использовании jQuery вы получаете массу анимационных эффектов. Такие анимационные эффекты при правильном использовании улучшают юзабилити и эстетику сайта, да и внедрить ее довольно легко. Но если вам необходимо использовать эту же страницу в мобильных устройствах, то эти анимационные эффекты будут "лишние". В этом случае вы можете отключить анимацию, оказывается делается это очень легко:
jQuery.fx.off = true;

$.fx.off = true;

среда, 30 сентября 2009 г.

Подсветка SyntaxHighlighter при динамическом добавлении html

Сегодня меня заморочила очень простая идея, как с помощью SyntaxHighlighter подсветить html код который был добавлен динамически. Такие ситуации возможны, когда, например, вы асинхронно добавляете какое то содержимое на страницу, или просто реализуете некое добавления html после каких то действий. Как внедрить подсветку SyntaxHighlighter я уже описывал в посте Прокачка блога Blogger.

Для запуска механизма подсветки кода в инициализации страницы нужно прописать:

SyntaxHighlighter.all();

Но вызывая данную функцию после добавлении динамически html результата я не получил.

воскресенье, 27 сентября 2009 г.

Прокачка блога Blogger. Асинхронная загрузка постов.

В один прекрасный день мой знакомый попросил внедрить ему в блог http://udmitry.tumblr.com/ функционал по асинхронной дозагрузки постов в текущую страницу. В качестве эксперимента решил для начала внедрить что то похожее в свой блог. Заранее приношу извинения всем посетителям которые ощущали неудобство от моих экспериментов в конце этой недели.




Для добавления данного функционала вам понадобиться выполнить 3 шага.

вторник, 22 сентября 2009 г.

Неугодные контакты "в топку" из Google чата!

При общении в Google чате бывают ситуации когда отображаемый список пользователей с которыми вы можете общаться сильно разросся, или наоборот в списке не хватает нужного человека, или вы просто хотите исключить каких то людей из общения. Что делать в таких ситуациях, как настроить Google час под себя?

пятница, 18 сентября 2009 г.

Flex Tile(TileDirection.HORIZONTAL) с изменяющейся высотой

 Во Flex 3 очень много разнообразных элементов управления, использовать их одно удовольствие. Например, элемент mx.containers.Tile способен отображать элементы, особенность его заключается в том что элементы которые не влезают в текущую строчку переносятся на следующую и так циклично пока не будут отображены все элементы.
 Он очень полезен в отображении данных с плавающей длинной, но при увеличении строчек размер самого контрола остается фиксированный. Не всегда есть возможность установить высоту на 100 процентов (height="100%"), но как сделать так что бы все строчки были видны и не появлялась прокрутка? Решение данной проблемы хочу описать в этом посте.

JavaMail в пивном соусе. Работа с содержанием и атачами письма.

Для работы с почтовиком необходимо уметь две вещи:
1. Получать и отправлять письма
2. Обрабатывать полученные письма.
Про работу с первый пунктом я уже писал в статье "Несколько мгновений JavaMail + Gmail", сейчас же хотел рассказать как же обрабатывать полученные письма.

воскресенье, 13 сентября 2009 г.

Прокачка блога Blogger

[Внес измениния 09.10.2009]

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

пятница, 11 сентября 2009 г.

Галерея картинок в блоге Blogger или три дня веселья!

Решил недавно встроить себе в блог Blogger галерею картинок. В инете есть много реализаций галерей, предпочтения решил отдать галереям которые построены на jQuery. Как ни странно но для такой простой задачи сразу не нашлось нормального решения, вернее не одно из них не работало запланированным способом.

Душевное спокойствие c Gmail или назад в Beta :)

Почтовик Gmail восхищает и поражает своими настройками и возможностями. Это целый программный комплекс который позволяет решать задачи по коммуникации и хранению информации.

В июле Google вывел почтовик из бета версии и это действительно здорово. Одной из интересных возможностей почтовика является, то что вы сами можете настраивать необходимые функции. Для этого необходимо зайти в настройках Gmail и переключится на вкладку "Экспериментальные функции". Все они интересны и оригинальны, кто еще не заметил эту вкладку - советую воспользоваться, возможно вы найдете для себя то чего вам не хватало!

Лично мне понравился не очень функциональный, но очень забавная функция "Назад к бета-версии - Восстановление душевного спокойствия путем возвращения стикера бета-версии на логотип Gmail", почти как путешествие в прошлое :).

Еще не пользуетесь? Создать аккаунт

вторник, 8 сентября 2009 г.

Интелисенс Eclipse в Django проектах

При написании кода на любом языке всегда важна скорость и отсутствие ошибок. Если вы гуру, печатаете 600 символов в минуту, "до символа" запоминаете названия всех API классов и методов с которым работаете и пишете без опечаток, то вам не нужна эта статья :).

суббота, 5 сентября 2009 г.

wordWrap в Text контроле (Flex)

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

Пришлось помучатся с переносом текста в контроле Text (mx.controls.Text). Добавлял я его следующим образом:

<mx:Text text="...много текста"/>

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

четверг, 3 сентября 2009 г.

Новые возможности Google календаря

Google календарь добавил новую опцию в настройках календаря "Просмотреть интересные календари"(Browse intresting calendar), для перехода необходимо выбрать Настройки-> Календари->Просмотреть интересные календари. При выборе данного пункта вы увидите календари праздников, спорта и дней рожденный. Воспользоваться изменениями смогут не все пользователи. И где тут подвох?

Тонкости программирования Django для новичков

Вчера наткнулся на статью Rama Vadakattu Top 10 tips to a new django developer о том что должны знать программисты новички на Django. Мой опыт не так велик в Django, но что бы собрать подобные знания и выработать навыки понадобился прочтение не одной умной статьи. Не со всеми советами я согласен, но каждый программист Django должен знать описанные моменты. Советую прочитать оригинал, ну а "ленивым" полезно будет дочитать до конца.

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

Django Form + JQuery

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

Недавно и до меня дошло озарения(лучше поздно, чем никогда), и я понял, что УЖЕ пользуюсь асинхронной валидацией форм, меня оно устраивало - его было легко внедрять, и кода было минимум. Основой был django-ajax-validation проект, на его основе и построен следующий пример.
Для реализации определил следующие критерии:
- Универсальный механизм сбора данных на клиенте.
- Минимум кода при внедрении.

воскресенье, 9 августа 2009 г.

Несколько мгновений JavaMail + Gmail


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

Через некоторое время у меня были методы для работы с почтой.

вторник, 4 августа 2009 г.

Как избежать рекламных ссылок в Gmail почте

Почтовиком Gmail я пользуюсь уже очень давно. Сам почтовик вызывает восхищение и удивление, и почти каждый новый функционал хочется детально пощупать и в очередной раз убедиться на сколько он хорош. При просмотре каждого письма справа от содержания отображаются рекламные ссылки, подбираются они посредством анализа текста письма, и таким образом мне пытаются предложить востребованную рекламу. Но к сожалению реклама как была так и останется всего лишь РЕКЛАМОЙ, а такая информация периодически раздражает.

Недавно прочитал интересную статью Joe McKay "How to avoid Gmail's Sponsored Links " о том как можно избежать рекламных ссылок в Gmail.

вторник, 26 мая 2009 г.

reCaptcha в django.contrib.comments

При рассмотрении механизма reCaptcha как антиспамерский метод защиты сразу же возникло желание внедрить его в стандартный механизм комментариев Django. Сказать по правде, мне нравятся комментарии в Django, в них заложена именно та гибкость которая позволяет легко менять основной функционал.

На просторах интернета описано множество решений использования reCaptcha в проектах. Правда все они мне показались "разляпистые", одни из них предлагали менять шаблон + вьюху, другие - форму + шаблон, и т.д. Рассматривая каждый из них ощущалась какая то незаконченность и вроде бы они все работают, но душа требовала красоты и порядка :).

понедельник, 18 мая 2009 г.

воскресенье, 17 мая 2009 г.

OpenId + Google account

Прочитал про такую замечательную вещь как OpenId. Ну и вот решил сразу попробовать как же эта технология работает.

Зайдя на сайт друга не раздумывая начал в поле OpenId вводить свой e-mail. И уже в предвкушении быстрой победы нажал кнопки "Войти". Результат меня изрядно удивил, выдало ошибку :(, в недоумении решил погуглить и все же разобраться с проблемой.

Информация вроде бы навалом по данной теме, но мои попытки авторизоваться были четны. И читая документацию на гугловском сайте случайно наткнулся на ссылку:
https://www.google.com/accounts/o8/id
И кто бы знал, что эта ссылка и есть та магическая комбинация цифр которую нужно вводить в поле OpenId (правда на сайт друга мне так и не удалось зайти, на этот раз мои планы нарушили банальные баги!).

среда, 6 мая 2009 г.

Error: django-ajax-validation + jquery 1.3.2

Понравился функционал валидации форм в django через дополнительную библиотеку django-ajax-validation.

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