Чудо{вищные} заметки

И всё-таки он обновляется! (да-да – а земля круглая и вертится).

Самые, на мой взгляд, вкусные изменения это закладка “Stack” в отладчике. (Её как раз стало очень нехватать – ранее стек вызова показывался в строке с меню и тупо не помещался в ней) и возможность использовать внешний редактор(!) по умолчанию это aptana.

Появились и визуальные изменения – подсветка исполняемого блока кода например. А вот «“better” debugging icons» по-моему паршивые – старые были привычнее и симпатичнее…

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

Technorati Tags: firefox, firebug

Расскажу несколько фактов о jQuery, которые как мне видится, не очень понимают “отечественные программеры”

• при “навешивании” обработчика какого-либо event-а к (например $(‘#element’).click(handler); ) он НЕ заменяет предыдущий обработчик (если таковой имелся), т.е. код:

  $('#element').click(function(){  alert('hello');})
  $('#element').click(function(){  alert('world'); })
  

  Выведет оба alert-а, а не только второй как думается некоторым.

• Непосредственно из первого вытекает следующий факт – конструкций $(document).ready(blablabla); в коде может быть “бесчисленное” количество раз – все обработчики вызовутся в порядке их добавления.
• Система событий в jQuery позволяет не ограничиваться теми событиями, которые есть в документации – можно создавать события самостоятельно:

  $('button').click(function(){ jQuery.event.trigger("buttonClicked");});
  $('div').bind('buttonClicked',function(){ $(this).hide();});
  $('span').bind('buttonClicked',function(){ $(this).show();});
  

  Подобная техника позволяет существенно упростить код и сделать его “читабельнее”.

• Анимационные эффекты в jQuery асинхронны и нередко возникает вопрос – как одну функцию выполнить строго после завершения первой. Все core-функции jQuery связанные с эффектами в качестве последнего параметра принимают callback – функцию, которая вызовется по завершению текущего эффекта:

  $('element-1').fadeOut(3000,function(){
        $('element-2').fadeIn(1500,function() {
        alert('done second effect');
     });
  });
  

• К ЛЮБОМУ html-элементу можно добавить ЛЮБОЙ атрибут (). По этим “самодельным” атрибутам элементы можно найти с помощью селекторов jQuery:

  var elements_by_attr = $('[@myownattr]');
  var elements_by_attr_with_value = $('[@myownattr="somevalue"]');
  var spans_by_attr = $('span[@myownattr]');
  

  Очень полезное “явление” при создании своих собственных элементов управления (и не только).

Ну и напоследок подкину найденную статейку “jQuery for JavaScript programmers”, прочитать которую стоит тем, кто только начинает осваивать прелести jQuery . Материал изложен на английском.

На просторах интернета не нашлось достойного js-контрола – аналога CheckListBox. Восполнил этот недостаток плагинчиком для jQuery. Как и всё в мире jQuery – применяется ненавязчиво и просто – заменяет собой <select> $(“select”).checklistbox();

Взять можно здесь.

Напишу-ка я ещё разок про packer. phing, нормы бухгалтерского учёта и ещё про чё-то.

В предыдущей своей чудовищной заметке про компрессию javascript-ов я упоминал perl-версию packer-а Дэна Эдвардса.
Её приходилось запускать через exec (и соответственно нужен perl). А вот совсем недавно нашёл реализацию этого мега-алгоритма на php и даже не одну.

Соответственно первая реализация была “впендюрена” в phing.task.ext.JsPacker.Task, а вторая напомнила о том что давно собирался изложить.
А именно – про gzip-сжатие js-файлов:

Собственно проблем ровно никаких – mod_gzip в apache, gzip on; в nginx и можно тему закрывать. Но как обычно “есть нюансы”: не всегда эти модули установлены на сервере, не всегда их получается установить, ну и главный “нюанс”: файлы статические, закономерно возникает мысль – зачем их упаковывать при каждом запросе? Вот об этом я и хотел рассказать, но не буду ;o)

Собственно решение прямо в лоб – упаковать файлы один раз и “задеплоить” на сервер. Я это(сжатие) делаю с помощью всё того же phing-а, а решение о том какой файл (сжатый или нет) отдать клиенту принимает mod_rewrite:

RewriteEngine on
RewriteRule ^(.*\.js\.gz)$ – [L]
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz

Это содержимое .htaccess который лежит в директории с js (или httpd.conf в секции Directory/Location отвечающей за эту же директорию).

Смысл вроде прозрачен, но я поясню – если рядом с файлом moi-super-bolshoy-javascript.js будет находиться его сжатая копия moi-super-bolshoy-javascript.js.gz и в запросе будет явно указано, что клиент поддерживает gzip-encoding, то ему(клиенту) выдадут именно сжатую копию. В противном случае (сжатие не поддерживается или сжатого файла нет) в ответ вернётся оригинальный файл.

В итоге уменьшили трафик сервера(и естественно клиентов) и снизили нагрузку на сервер.

Естественно этот фокус можно (и даже наверное нужно) проделать с css.

P.S.
Далеко не все файлы стоит упаковывать зипом . И не каждый файл стоит упаковывать packer-ом – стоит проверить результат на jsl(int)-ом – не редки случаи “поломки” скриптов. Ну а как упаковать оптимальнее – решать индивидуально с каждым файлом предстоит вам.

Update

А вот нашёлся способ отдачи gzip-ованного контента даже лучший, чем описал я.

Geoff Stearns и Bobby van der Sluis задумали осуществить маленькую революцию и наконец “устаканить” процедуру вставки flash-ек на web-страницы.

Товарищи(господа?) решили сделать “мега-супер-пупер” универсальную библиотеку для вставки swf в (x)html-страницы, избавляющую от вездесущих глюков и багов в MSIE различных браузерах, объединив функционал SWFObject и UFO и не упустив из виду другие популярные swf-related приложения (вроде SWFAddress и SWFUpload)

И дело анонсом не закончилось – уже есть сводная таблица методов внедрения swf и поддержкой оных в различных браузерах, которая впрочем пока (надеюсь только пока) не содержит linux-овых бродилок.

От всей души желаю товарищам(господам?) удачи!
Upd: “Это” скоро кончиться
Technorati Tags: web, dev, swf, swfobject, swffix

jquery обзавёлся собственной promote-кнопочкой.
Сам за неё голосовал – симпатичная и ненавязчивая:

В догонку: у jquery есть наглядный мануал

Update:
нашёлся русский перевод руководства по jquery для новичков – может кому-нибудь пригодиться…
Technorati Tags: web, dev, js, jquery

Ещё немного о jquery:
замечательный метод ready в IE в некоторых случаях не желает работать.
Документация честно предупреждает о том, что если для body уже есть onload-handler, то метод может не сработать. Но обработчиков нет, а ready срабатывает 2 раза из 10 попыток. При этом иногда IE ещё не успевает обсчитать некоторые свойства объектов (замечено на offsetTop).
А если отложить выполнение даже на 1 миллисекунду (через setTimeout), то всё выполняется так как задумано.
На помощь приходит функция из БазыЗнанийXpoint-а о которой я писал раньше. Работает как часы (но без timeout-ов).

Как же достал этот IE…

Technorati Tags: web, dev, js, ie, onload, jquery