AjaxBlog » Инструмент разработчика

Гаджет из фотошопа

admin — Wed, 21 Oct 2009 11:28:40 +0000

Для одного рабочего проекта нужно было создать «по быстрому» прототип системы. Основная логика интерфейса была, все что видеть пользователь – это гаджет. К сожалению интерфейс не был одобрен руководством, а прототип остался, по этому, если кто-то использует его в своем проекте, я не буду против. Обращаю ваше внимания, так как это прототип делали «по быстрому» – то дизайн и логика поведения была взята с одной очень уважаемой мною программы.

И так что он умеет:

Двигаться по странице (move)
Изменять размеры (resize)
Имеет возможность настроить максимальную ширину панели (max width)
Имеет два состояния: нормальное (normal) и компактное (compact)
Имеет возможность сортировать гаджеты внутри панельки (sort)
Просмотр в компактном режиме

Нормальный режим

Компактный режим

Смотрим: рабочий пример гаджета

Технология: jQuery + UI, CSS, HTML – все просто. Если кому-то нужно будет доработать гаджет или адаптировать к своим требованием, пишите – договоримся.

Krumo – средство для отладки php кода

admin — Wed, 29 Oct 2008 07:52:07 +0000

Чем хорошо этот Kumo, он позволяет отказаться от ставших привычных операций echo, print_r(), var_dump(). В замен использовать krumo(). Библиотека достаточно интеллектуальна, чтобы понять какой тип переменой вы передали (String, Array, Object, Clasи т.д.) и сама проводит соответствующие преобразование в нужный html код для выдачи в отформатированном виде в ваш браузер.

Как работает:

Скачиваем: на официальном сайте или у меня. В последнем случае вы получите немного модифицированную библиотеку.
- Добавил подержу оператора __(). Теперь можно вывести переменные как с помощью оператора krumo(), так и __().
- Убрал в отладочном выводе следующию строчку, Krumo version 0.2.1a | http://krumo.sourceforge.net/. Да простят меня разработчики, но я думаю где взять и какая версия вас мало будет интересовать во время отладки кода.
Подключаем
```
include "class.krumo.php";
```
Используем
```
krumo($var);
или так
__($var);
```

Дополнительные настройки

// показ debug backgrace
 krumo::backtrace();
 // показ всех подключенных классов
 krumo::includes();
 // показ всех функций
 krumo::functions();
 // показ всех декларированных классов
 krumo::classes();
 // показ всех объявленных констант
 krumo::defines();
 // запретить вывод отладочных сообщений всего что ниже
 krumo::disable();
 // Этот вывод показан не будет
 krumo::includes();
 // Разрешить отладочный вывод
 krumo::enable();
 // Этот вывод будет показан
 krumo::classes();

Pencil – зарисовки и наброски прототипов интерфейсов с помощью Firefox

admin — Tue, 21 Oct 2008 18:41:44 +0000

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

К сожалению под рукой не оказалось сканера и поэтому я решил сделать прототип системы в фотошопе. После второй кнопки, я понял что не успею. Поэтому решил поискать в Интернете, что-то, что позволило решить мою задачу.

Вот что я нашёл – Pencil.

Доступ ко всем свойствам формы

Создание прототипа GUI для настольных приложений Windows.
Страница Свойства диалог с возможностью выбрать другую страницу в качестве фонового.
Текст на экране поддерживает возможность редактирование, как простого текста так и форматированного.
Pencil поддерживает возможность конвертировать ваш проект в PNG.

Самая приятная фича этого проекта, в том, что он сделан как плагин к Firefox. Мой любимый Firefox – уже перестает быть просто браузером, а становится средой для разработки приложений.

Скажи «здравствуй» Blackbird и «до свидание» alert()

admin — Thu, 16 Oct 2008 12:37:57 +0000

Вот такой громкий заголовок венчает сайт авторов Blackbird.

Что такое Blackbird – это js скрипт который позволяет забыть о существовании оператора JavaScript’а – alert(). Для разработчика javascript – интересный инструмент дебагинка кода.

Конечно, «монстры» JavaScript программирования скажут, зачем нам это нужно. Когда есть Firebug с его console.log(message). Для отладки кода в браузерах отличном от Firefox, есть от встроенных средств браузера до Firebug Lite.

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

Как подключить

скачать код
прописать в html файле следующие строчки

Что умеет

log.toggle(): Скрыть/Показать Blackbird
log.move(): Перемещение Blackbird к следующей фиксированной позиции: верхней-левой, верхней-правой, нижней-левой, нижней-правой.
log.resize(): Развернуть / Свернуть Blackbird
log.clear(): Очистить от содержимого Blackbird
log.debug(message): Добавить отладочную информацию в Blackbird
log.info(message): Добавить сообщение в Blackbird
log.warn(message): Добавить предупреждение в Blackbird
log.error(message): Добавить ошибку в Blackbird
log.profile(label): Профайлер кода. Это метка должна стоять в начале и конце тестируемого кода. Очень удобно чтобы узнать время выполнение вашего кусочка кода.

Какие клавиши понимает

F2: Скрыть/Показать
Shift+F2: Переместить
Alt+Shift+F2: Очистить Blackbird от сообщений

Drosera – отладчик javascript для Safari

admin — Tue, 05 Aug 2008 09:48:51 +0000

Webkit – движок Safari получил мощный javascript отладчик – Drosera. Это сообщение было опубликовано на блоке Safari. Загрузив последнюю ночную сборку Webkit вы сразу получите этот инструмент. По функциональности он не сильно уступает известному Firebug.

Теперь, кто сможет сказать, что javascript – не настоящий язык программирования.

[Denwer, Xdebug , Notepad++] – полноценная среда разработки

admin — Thu, 31 Jul 2008 12:38:45 +0000

Существует много хороших редакторов кода для PHP, я выбрал для себя Notepad++.
Что-бы не разводить «религиозные войны» я перечислю те свойство редактора которые важны для меня:

Скорость работы редактора
Малый размер и возможность работы с флешки
Подсветка текста и возможность сворачивания блоков, согласно синтаксису языка программирования
Авто-завершение набираемого слова
Одновременная работа с множеством документов
Одновременный просмотр нескольких документов
Динамическое изменение окон просмотра
Автоматическое определение состояния файла
Поддержка большого количества языков
Выделение скобок при редактировании текста

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

Оказываетесь для него есть плагин DBGP plugin, который превращает Notepad++ в полноценную php IDE.

Дальше расскажу как «подружить» между собой Denver + Xdebug + Notepad++

Скачиваем Денвер и устанавливаем у себя на компьютере, все просто. Для тех кто это делает первый раз, инструкция.
Скачиваем Notepad++ и инсталлируем его.
Запускаем Денвер в браузере набираем http://localhost/Tests/PHP5/index.php5 и смотрим версию php, у меня 5.2.4
Скачиваем Xdebug, обратите внимание нужно скачать dll нужной версии под конкретную версию php
Скаченую dll помещаем в папку путь\usr\local\php5\ext\, где путь (у меня C:\WebServers) -диск и папка куда вы установили свой Денвер
В файле путь\usr\local\php5\php.ini дописываем следующие строчки
```
extension=php_xdebug.dll

zend_extension_ts = C:\WebServers\usr\local\php5\ext\php_xdebug.dll 

xdebug.remote_enable = On
xdebug.remote_autostart = On
xdebug.auto_trace = On
xdebug.remote_host = 127.0.0.1
xdebug.remote_enable = 1
xdebug.remote_handler = dbgp
xdebug.remote_mode=req
xdebug.idekey=default

xdebug.profiler_enable  = 1
xdebug.profiler_output_dir = C:\T\xdebug_prof\
```
Обратите внимание, что C:\WebServers – нужно заменить на вашпуть, а
C:\tmp\xdebug_prof\ – на папку где будет хранитьса ваши профайлы.

Замечание: в название путе лучше отказаться от использование не латинских букв и спецсимволов.
Перезагружаем Денвер, в браузере набираем http://localhost/Tests/PHP5/index.php5 и смотрим

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

Вот очень хорошая статья «Найдите ошибки в PHP-приложениях при помощи Xdebug», о том как это расширение увеличивает ваш возможности поиска ошибок.
Но наша цель IDE – продолжаем идти к ней…
Скачиваем DBGP plugin и устанавливаем его в папочку C:\Program Files\Notepad++\plugins\ (ну или куда вы установили Notepad++)
Залускаем Notepadd++, заходим Дополнение>>DBGp>>Config

Замечание: после home должна идти имя папки, где лежат скрипты которые вы собираетесь дебажить
После этого вроде вроде все должно работать, но у меня так и неполучилось стартовать debug сессию. Но не беда нас выручить плагин для ФФ -Xdebug Helper. Заходим по сылочки и устанавливаем в своем браузере.
Ну вроде и все. Как все это работаем:
- открываем файл со скриптом в Notepad++
- ставим точку остановки
- запускаем браузер с url – нашего проекта
- активизируем Xdebug session – кликом по иконки (если она не активизирована)
  Замечание: после активизации сессии, нужно перегрузить страничку (F5)
- Вываливаемся в Notepad++ и начинаем пошагово дебажить код

Opera Dragonfly

admin — Tue, 22 Jul 2008 08:25:13 +0000

Новость не нова, но я не мог пройти мимо нее и не осветить в своем блоге.
Opera выложила свои инструмент для веб-разработчиков под названием Dragonfly. Правда пока альфа релиз, но по моему мнению уже можно во всю пользоваться.

Инструкция по инсталляции

Заходим на сайт и заканчиваем Оперу.
Запускаем Оперу.
После находим надпись «debug menu» в разделе «The Opera debug menu» и кликаем по ссылки (кликать обязательно в Опере).
В панель Оперы добавилься новый пункт «Debug»

Из плюсов – создатели не стали изобретать велосипед и взяли дизайн и функционал Firebug. Поэтому сразу все понятно и привычно. Мне нравится такой подход.

Из минусов

невозможно на лету менять DOM обьекты
невозможно налету менять Styleshett для элемента если он default values
нет вкладке Layout
нет вкладке Watch, вместо нее Inspection c полным списком переменных что очень неудобно если нужно отслеживать изменения значений у некоторых переменных
не всегда сразу загружается

Как видем минусы не настолько существенны по сравнению с теми плюсами который дает этот инструмент.

P.S. Интересная тенденция в именования инструментов:

Firefox – Firebug (cветлячок)
Opera – Dragonfly (cтрекоза)

Осталось IE своий инструмент назвать как нибудь – Butterfly.

Js Decoder или как распутать запутаный код

admin — Fri, 11 Jul 2008 11:02:51 +0000

Нашел в сети замечательный онлайн инструмент Js Decoder. Он позволяет декодировать обфускационный код.

Часто можно встретить код такого вида
var base_code='';var jsdecoder;var jscolorizer;var code='';var time=0;function decode() {code='';base_code='';jsdecoder=new JsDecoder();jscolorizer=new JsColorizer();if($('msg').innerHTML.length){do_clean_init();}else{jsdecoder.s=$("a1").value;do_decode_init();}} function do_decode_init() {$('msg').innerHTML+='Decoding .. ';setTimeout(do_decode,50);}...

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

Вот для того что-бы привести код в человекопонятный вид и служит этот инструмент.

Meteora – новый javascript фреймворк

admin — Wed, 09 Jul 2008 07:31:55 +0000

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

Я хочу поговорить о достаточно новом проекте Meteora построенной на библиотеке mootools. Основная идея – создание уже готовых виджетов.

Как пишут сами разработчики:

Meteora сборка кросс браузерных виджетов и элементов управления, который позволяет Вам быстро писать богатые и настраиваемые web-приложения, без необходимости напрасно тратить время, читая страницы документации или программируя чрезмерный javascript, отладка которого в каждом браузере является мучением.

Немного корявый перевод, но я старался близко к тексту оригинала

Текущая сборка содержит:

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

Отладка PHP средствами FirePHP

admin — Tue, 08 Jul 2008 06:24:44 +0000

Все хорошо знают плагин для Firefox – Firebug. Но мало кто знает про другой не менее интересный плагин – FirePHP. Я постараюсь исправить этот недостаток.

Что для успешной работы нужно:

PHP: 5
Firefox: 2, 3
Firebug: 1.05, 1.1, 1.2

FirePHP позволяет выводить информацию в консоль Firebug непосредственно из PHP. Делается это довольно просто:

require('FirePHP.class.php');
$firephp -> fb('Log message'  ,FirePHP::LOG);
$firephp -> fb('Info message' ,FirePHP::INFO);
$firephp -> fb('Warn message' ,FirePHP::WARN);
$firephp -> fb('Error message',FirePHP::ERROR);
$firephp -> fb(apache_request_headers(),'RequestHeaders',FirePHP::DUMP);

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

Преимущество такой отладки в том, что данные передаются не в теле страницы, а в заголовках. Это значит, что во-первых, страница не замусориваетса всяческими echo`ми и var_dump`ами, а во вторых, можно без проблем отлаживать AJAX-вызовы.

И «на сладкое», для поклонников фреймворка CodeIgnitr, для него создано специальное дополнение Fire Ignition. Которое позволяет объединить вместе: CodeIgnitr, Firebug, FirePHP и PHP 5.

Удачного кодинга.