codeBlogZ

OpenCV и bada SDK: декодирование изображений

noreply@blogger.com (Сергей | codeBlogZ) — Sun, 11 Jul 2010 18:19:00 +0000

Стоит задача: воспользоваться функциями библиотеки компьютерного зрения в приложениях под bada SDK. Скажу, что над этой задачей я бился где-то с недельку, и прямо сейчас кайфую от достигнутого результата :) Приятное ощущение для программиста, не правда ли?!

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

Для начала нам надо
разобраться, что нужно для решения задачи. Подразумевается, что вы уже установили bada SDK и имеете некоторый опыт общения с ней, чтобы я тут не заострял внимание на мелочах. Дальше, нужна сама библиотека OpenCV. Ее можно скачать отсюда. Качаете архив с исходниками (никаких *-win32-vs2008.zip).

Все ниже изложенное будет касаться версии 2.1.0

Скачивать исходники нужно для того, чтобы получить бинарники, заточенные под платформу bada. Это важный момент! О том, как получить такие бинарники, написан отдельный пост.

Когда бинарники получены (*.lib и *.dll), делаем следующее: либы нужны для линковки и их прописываем в свойствах проекта (Project > Properties > C/C++ Build > Settings > вкладка Tool Settings > bada C++ Linker > Libraries). DLL-ки должны быть доступны через переменную среды PATH.

Если при запуске, симулятор вылетает в самом начале без каких-либо ошибок — 99% вероятность того, что проблема именно в недоступности DLL. Этот совет стоил мне нескольких дней мытарств.

Не забудьте также, в свойствах проекта (Project > Properties > C/C++ Build > Settings > вкладка Tool Settings > bada C++ Compiler > Directories), указать путь до инклудов рассматриваемой библиотеки.

Теперь все готово к работе. Дальше я поведаю о том, как работать с изображениями в среде bada. Следующий кусочек кода, несмотря на его простоту, дался мне большим количеством экспериментов.

#include <cv.h>
void TestingOpenCV() 
{
 String path(L"/Home/test.jpg");
 Image image;
 image.Construct();

 Bitmap *pBitmap = image.DecodeN(path, BITMAP_PIXEL_FORMAT_RGB565);

 BufferInfo bufferInfo;
 result r = pBitmap->Lock(bufferInfo);
 if (r == E_SUCCESS) {
  Decode(bufferInfo);
  pBitmap->Unlock();
 }
}

По коду, мы декодируем изображение в битмап. bada SDK поддерживает три формата, RGB565 среди которых наиболее удобоваримый. Чтобы работать с пикселями напрямую, необходимо вызвать Lock() и получить буфер данных. Далее идет функция конвертации в формат OpenCV.

void Decode(BufferInfo& bufferInfo) 
{
 cv::Mat mat(bufferInfo.height, bufferInfo.width, CV_8UC2, bufferInfo.pPixels);
 cv::Mat image;

 cv::cvtColor(mat, image, CV_BGR5652BGR);

 // continue working with *image* - native OpenCV format
}

Обратите внимание, что мы имитируем двухканальный 8-битный формат, хотя на самом деле изображение 16-битное и с 3 каналами. В этом вся магия! Ну, а дальше выполняем преобразование в обычный формат RGB and keep going! Переменная image — решение поставленной задачи.

Сборка OpenCV средствами MinGW

noreply@blogger.com (Сергей | codeBlogZ) — Sun, 11 Jul 2010 18:18:00 +0000

В этой статье хотелось бы раскрыть нюансы сборки данной библиотеки. В моем случае эта процедура оказалась нетривиальной, с большим количеством граблей. Как известно, для последних версий OpenCV (на данный момент это 2.0 и больше) используется make-конфигуратор CMake. Далее я расскажу об этапах сборки и как с этим конфигуратором справиться. Прошу под кат.

Итак, что нам нужно.

Исходники OpenCV под Windows. У меня они находятся в D:/libs/OpenCV-2.1.0/
MinGW компилятор, заточенный под bada. У меня — D:\bada\1.0.0b3\Tools\Toolchains\Win32\bin. Вместо него, видимо, можно использовать обычный g++, если не требуется кросс-компиляция.
Сам MinGW и его инклуды: D:/MinGW/includes
CMake 2.6+
Bash — намного удобнее виндового cmd.exe. Идет вместе с TortoiseGit. Установите, не пожалеете.

Когда это все установлено, запускаем CMake-GUI. В первом поле ввода "Where is the source code" указываем путь к распакованным исходникам OpenCV. Во втором поле ввода указываем каталог, где бы нам хотелось разместить файлы настроек проекта. Указываем любое понравившееся (см. рис 1).

Рис. 1 — Указываем каталоги

Нажимаем кнопку Configure. Если выскочил вопрос "Build directory does not exist, should I create it?", соглашаемся. Потом. Должен открыться диалог, который предлагает выбрать средства компиляции. Можно выбрать в качестве IDE MS Visual Studio, на выходе получим проект для работы с библиотекой OpenCV под Виндой. У нас же стоит задача собрать библиотеку средствами MinGW.

Вся эта затея не будет казаться странной, если я скажу зачем она. Бинарники в стандартной поставке идут с оптимизацией и использованием SSE, что в моем случае недопустимо из-за того, что я использую их для своего проекта под Samsung Wave. Этот телефон, как ни странно, не поддерживает инструкции SSE, из-за чего некоторые функции библиотеки невозможно использовать. Это заставило меня пересобрать OpenCV.

Итак, в выпадающем меню выбираем "MinGW Makefiles", а также переключаем чекбокс на "Specify native compilers". Повторюсь, мне это нужно для того, чтобы использовать компилятор из поставки bada SDK. Нажимаем Finish.

Рис. 2 — Указываем пути к компилятору

Далее наверняка выскочит Error. Вот тут и начинаются танцы с дудками :) Чтобы четко понять, что от нас хотят, переключаемся на Advanced View (сверху над списком).

В таблице будут строчки, подсвеченные красным. С ними и надо разобраться. Исправляем вручную прежде всего те, в значении которых есть слова NOTFOUND, избирательно. Выставляем их. Нажимаем опять кнопку Configure. И так до тех пор, пока внизу в логах не появится строчка "Configuring done". Теперь еще раз проверяем все параметры и нажимаем в последний раз Configure, а потом Generate.

Насчет параметров. Моей целью было снять галочки напротив USE_SSE, USE_SSE2.

С такими параметрами я выполнял компиляцию.

Возможно, потом придется внести поправки. Достаточно просто загрузить CMake-GUI, все настройки восстановятся.

Теперь переходим к нашему каталогу, в котором находится сгенерированный проект (/build-mingw). Переходим в консоль и выполяем команду cs-make.

cs-make — платформо-специфический make под bada. Для обычных случаев, используйте make.

Если в ходе компиляции возникают ошибки (а они будут), то с ними нужно разобраться самостоятельно. Универсального совета не дам, действуйте по обстоятельствам: где-то надо добавить опцию компилятора (например, путь поиска инклудов), где-то ручками подправить исходники.

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

OpenCV под bada OS

noreply@blogger.com (Сергей | codeBlogZ) — Thu, 08 Jul 2010 19:53:00 +0000

Проверено — работает :) Стоит обратить внимание, что OpenCV ниже версии 2.0 вызывает крэши приложений, запущенных как из под симулятора, так и с телефона. Почему — мне выяснить не удалось.

Обновлено через несколько дней. Проблема заключалась в том, что в системной переменной PATH не был прописан путь до файлов dll этой библиотеки.

Важное замечание! Для того, чтобы иметь возможность слинковаться со статическими либками, расположенными в каталоге /lib, надо переименовать их в *.lib. Почему разработчики использовали расширение .dll мне не понятно.

Кстати! Вот удивительно, не думал, что вернусь к использованию OpenCV, да и вообще, — к программированию на плюсах. Планирую (если опять не забью на блог) что-нибудь полезное по этому поводу выложить. Может даже видеотуториал. Посмотрим...

The chosen operation is not enabled

noreply@blogger.com (Сергей | codeBlogZ) — Thu, 08 Jul 2010 09:43:00 +0000

На такое вот сообщение нарвался в Eclipse CDT при попытке установить точку останова в исходном коде. Это означало, что breakpoint-ами нельзя будет воспользоваться. Как от этого излечиться гугль не подсказал, но в результате долгих танцев с бубнами мне удалось их задействовать.

Если вы попали в такую же беду, надо в меню Run > Brealpoint Types поставить галку напротив C/C++ Breakpoints.

P.S. К слову, я занимаюсь программированием под bada OS, а в частности, под свой Samsung Wave. Если разрожусь на мысли, то в скором поделюсь своими впечатлениями.

JavaScript Library for Querying CSS

noreply@blogger.com (Сергей | codeBlogZ) — Mon, 05 Apr 2010 07:44:00 +0000

Спешу поделиться одной очень классной тулзой CSSUtilities — библиотекой, которая работает со стилями CSS. Она может определять правила CSS, которые применены к данному элементу и, отдельно, унаследованные от родителей. Заостряю ваше внимание, что мы получаем не нормализованные значения, а каскады стилей, то есть те, которые можно встретить в любом девелоперском тулбаре (Firebug, Dragonfly и др.). Судя по документу, у нее еще очень много практических возможностей...

Узнал по наводке этой статьи.
Страница с презентацией возможностей — тыц.

Для сведения: сжатая бибиотека занимает около 40Кб.

Браузерный JavaScript и стандарты

noreply@blogger.com (Сергей | codeBlogZ) — Thu, 11 Mar 2010 19:02:00 +0000

Разработчики из Гугла выкатили в онлайн инструмент Sputnik для функционального тестирования браузеров (он и раньше существовал, но только как неофициальное решение). Тесты, а их более пяти тысяч, проверяют, насколько хорошо движок соответствует спецификации ECMA-262, 3rd edition. На данный момент, лучше всех это удается сделать Opera 10.50 — всего 78 ошибок против 463 у аутсайдера IE8.

Так что, если потребуется проверить код на "правильность", стоит обращаться к Опере. Кстати говоря, в свете последних заявлений о ее (его?) быстроте, этот результат показывает, что норвежские разработчики отлично поработали над созданием нового движка Carakan.

Сравните, какая ситуация была полгода назад и ныне.
Новость в блоге Chromium.

Минимизация HTML кода

noreply@blogger.com (Сергей | codeBlogZ) — Tue, 09 Mar 2010 20:38:00 +0000

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

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

Собственно, сам инструмент располагается здесь: HTML Minifier.

Но, если верить статье по оптимизации JS, "сжатие JavaScript-файлов даст нам всего лишь 5-7% уменьшение размера относительно обычного gzip, который можно использовать везде". Так что, стоит ли овчинка выделки...

[Javascript, Watir] Функциональное тестирование

noreply@blogger.com (Сергей | codeBlogZ) — Tue, 09 Mar 2010 12:40:00 +0000

Моя оконная реализация — отличный полигон для знакомства с различными техниками программирования. В этой статье я хочу рассказать про функциональное тестирование. Оно мне пригодится в свете того, что я собираюсь сделать. Я хочу быть уверенным, что мои изменения не будут вести к регрессии (к появлению ошибок в отлаженных участках кода). О плюсах тестирования вы и сами знаете — с ним лучше, чем без.

Хочу заострить ваше внимание, что буду проводить не модульное (юнит-) тестирование, а функциональное. Согласно википедии, таким образом проверяются функции приложения, а не отдельных его модулей.

Средство для тестирования я выбрал нестандартное — не Selenium, а Watir. Кстати, есть еще Sahi, но с ним разберусь в следующий раз (сравнительная таблица). Я остановился на Watir, потому что он мне нравится :) Во-первых, в качестве скриптового языка используется Ruby (классный язык), во-вторых, с ним проще начать работать, чем с Selenium (не въехал я в него).

Установка Watir. Проследуйте по ссылке с инструкциями. Вам надо поставить Руби (лучше всего версии 1.8), а потом и нужные пакеты через gem install watir.

Теперь давайте проверим Watir в работе на простом примере. Напишем тест, смысл которого открыть поиск гугла и найти статьи этого блога.

require 'rubygems'
require 'watir'   # the controller
require 'test/unit' 

class TC_test_suite < Test::Unit::TestCase

 def test_ask_google_for_codeblogz
  puts 'Init browser'
  b = Watir::Browser.new

  puts 'Go to Google Search'
  b.goto("http://www.google.com")

  puts 'Put search query'
  b.text_field(:name, "q").set "watir site:codeblogz.ru"
  
  puts 'Click button to start searching'
  b.button(:name, "btnG").click

  puts 'Check whether codeblogz has post about Watir'
  assert(b.text.include?("www.codeblogz.ru") )
  
  puts 'End of test'
 end
end

Запустите в консоли, и смотрите на "представление" :)

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

Перемещение окна
Изменение размеров
Сворачивание в низ страницы

Открывать браузер, искать поля ввода — это не сложно. Теперь давайте разберемся, как управлять мышой, как "таскать" и "ресайзить" наши веб-окна. Тут без активного интерактива не обойтись, поэтому надо воспользоваться одной dll-кой, которую нужно зарегистрировать в системе. Для Windows это делается через regsvr32 C:\ruby\lib\ruby\gems\1.8\gems\watir-1.6.5\watir\AutoItX3.dll. И нам открываются новые возможности :) А именно: можно имитировать перемещение курсора, нажатие и удерживание левой кнопки и др.

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

require 'rubygems'
require 'watir'   # the controller
require 'test/unit' 
require 'win32ole'

class TC_test_suite < Test::Unit::TestCase

 def test_move_window
  puts 'Init browser'
  b = Watir::IE.attach(:title , /pss_window functional test/)
  b.bring_to_front
  b.maximize

  puts "Find window with title 'Library capabilities'"

  d = b.div(:xpath, "//div[text() = 'Library capabilities']")
  top = d.attribute_value("offsetTop")
  left = d.attribute_value("offsetLeft")
  height = d.attribute_value("clientHeight")
  width = d.attribute_value("clientWidth")

  y = 110 + top + height / 2
  x = 10 + left + width / 2
  puts x, y 
  
  puts "Start mouse manipulations"
  a = WIN32OLE.new("AutoItX3.Control")
  a.mousemove(x,y)
  a.mousedown
  
  a.mousemove(x+50, y+50)
  a.mousemove(x+150, y+50)
  a.mousemove(x+150, y+250)
  a.mouseup
  puts "End"
 end
end

Этот тест имеет множество недостатков:

не работает, если окно браузера закрыто (я пока не разобрался, как заставить IE открывать локальные файлы без подтверждения);
не определяет реальные координаты элемента (необходимо реализовать цикл);
да и вообще, проверяет работу только одной функции - перемещения
слишком простой, и мало чего проверяет — необходимо написать множество тест-кейсов, чтобы можно было перейти к следующему этапу.

Начало положено. Теперь надо подучить Руби и написать более адекватные тесты :) Об этом в следующих статьях.

P.S. Если среди вас есть рубисты, или просто знакомые с Watir — прошу отметиться в комментариях, с какими полезностями вы можете поделиться.

[JavaScript] Окошки в браузере

noreply@blogger.com (Сергей | codeBlogZ) — Sat, 06 Mar 2010 20:41:00 +0000

Закончился конкурс, осталась рабочая реализация. Суть — веб-окошки, которые можно произвольно таскать по странице, изменять их горизонтально-вертикальные размеры, сворачивать и вообще закрывать.
По прошествии некоторого времени, глядя на код и его недостатки (о коих ниже), я понимаю, что мне еще учиться и учиться джаваскрипту! Все-таки это язык гибких возможностей, и я выбрал не самый удачный способ реализации.

Но на ошибках учатся, без этого никак.

Исходный код можно найти на гитхабе, в открытом доступе: github.com/severality/pss_vk_windows
Поиграться с конкурсным решением можно здесь: js.codeblogz.ru/windows/index.htm

Текущий релиз будет именоваться гордым 0.1a. То есть вы понимаете, что до полноценного Один-Ноль пока далековато и стремиться к таковому быстро я не обещаю.

Планы:

изменить архитектуру: сейчас окна строятся по принципу лэйаутов в Java и Qt. Я ставил на гибкость и универсальность. Но зачем это нужно, если в проекте нужен набор из трех окошек. Окна однотипные и со статичными данными. Нет нужды каждый раз при загрузке генерировать окна, если можно просто описать их через язык разметки html (для этого он собственно и нужен) и вешать на них соответствующие обработчики;
реализовать все на манер ненавязчивого js, чтобы при неработающем у клиента js выводилась рабочая оконная структура;
уйти от использования проприетарных common.js и rustyle.css
избавиться от багов :)

На этом все. Обсуждение кода приветствуется, прошу в комментарии.

Итоги конкурса

noreply@blogger.com (Сергей | codeBlogZ) — Wed, 03 Mar 2010 18:42:00 +0000

Вот и результаты конкурса объявили. Я не вошел в призеры. Это огорчает. Думаю, меня сгубила привычка делать все универсально и основательно, хотя можно было победить с работой, которая делает не больше не меньше сказанного, с массой упрощений. Ну и ладно :) Перевернется и на нашей улице грузовик с блекджеком и шлюхами... Ага.

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

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

А впереди следующий конкурс — виджеты для Оперы. Может там что получится добиться :)

Новости с фронтов

noreply@blogger.com (Сергей | codeBlogZ) — Wed, 24 Feb 2010 20:46:00 +0000

Видели последний тест на JavaScript от Дмитрия Сошникова? Вот он, подивитесь :) Это взрыв мозга, в целом сложный и в некоторых местах чересчур хитрый! Автору респект. (Даже хочется привести цитату одного комментария).

Между тем, давно не ощущал себя студентом: постоянные недосыпы, в голове крутится только одно — как бы это лучше сделать... Это я про конкурс, на который себя же и подбил. Пока до конца не готово, но текущими результатами я доволен. Конкуренцию должен составить! Может даже выложу в опен-сорс. Ждите понедельника (1 марта) — там объявят результаты.

Заработай своим умом

noreply@blogger.com (Сергей | codeBlogZ) — Wed, 17 Feb 2010 20:49:00 +0000

И не просто заработай, а покажи свои навыки и находчивость, стань лучше сотни других! И получи приз как признание своей ценности :).

Никто не собирается поучаствовать в конкурсе на лучшую разработку? На этой неделе по языку js было объявлено два таких "соревнования":

The Code-to-win Challenge от Opera — необходимо отличиться в создании оригинального либо всенародно любимого виджета под новый движок браузера. На кону MacBook Pro и HTC HD2. Подробности читайте в офф. пресс-релизе.
Конкурс на JS от ВКонтакте. Почему бы и нет? Требуется реализовать оконную библиотеку. Подробности читайте в этой теме.

Вы как хотите, а я рискну! Там и там. Это неоценимый опыт, проверка своих сил может не в экстремальных, но вполне в приближенных к ним условиях, плюс — прекрасная возможность отличиться.

Кто со мной?

P.S. Это мотивационный пост. Не хочу пасовать перед реальной возможностью ;)

Еще одна викторина, но уже с ответами от меня

noreply@blogger.com (Сергей | codeBlogZ) — Tue, 16 Feb 2010 21:45:00 +0000

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

Тест предложен блоггером Nicholas C. Zakas (оригинал). Отвечать буду аргументированно, с подглядыванием в консоль (все-таки до гуру расти и расти :) ).

Example #1

var num1 = 5, num2 = 10, result = num1+++num2;

Questions:
What is the value of result?
What is the value of num1?
What is the value of num2?

Судя по множеству плюсов надо решить, используется ли здесь инфиксный (++num2) либо постфиксный (num1++) инкремент. А зависит это от порядка выполнения операций в выражении (точнее, от их приоритета). От этого сильно зависит значение всех трех переменных. Во многих языках инкремент (как и декремент) имеет высший приоритет, нежели сложение (вычитание). Проверка этого обстоятельства в js подтверждает мои предположения.

Ответ: num1==6, num2==10, result==15

Example #2

var x = 5, o = { x: 10, doIt: function doIt(){ var x = 20; setTimeout(function(){ alert(this.x); }, 10); } }; o.doIt();

Questions:
What value is displayed in the alert?

Здесь, как по мне, все просто (постоянно с таким сталкиваюсь). Функция, вызываемая по таймауту, выполняется в контексте объекта window. Поэтому this.x равнозначно window.x == x == 5.

Ответ: 5

Example #3

var num1 = "10", num2 = "9";

Questions:

What is the value of num1 < num2?
What is the value of +num1 < num2?
What is the value of num1 + num2?
What is the value of +num1 + num2?

С подобной проблемой я тоже сталкивался, когда оказалось, что "10" < "9" // true!. А дело тут в сравнении строк, а не сравнении чисел. Если оба операнда — строки, то сравнение основывается на стандартном лексикографическом порядке юникодных значений. Если же один из операндов число, то второй операнд (строка) приводится к числу. Поэтому +"10" < "9" // false!. (Оператор "плюс" приводит строку "10" к соответствующему числу.)

Оператор "+" с операндом строка выполняет конкатенацию как с числом, так и с другой строкой. Поэтому num1 + num2 == "10" + "9" == +num1 + num2 == 10 + "9" == "109"

Example #4

var message = "Hello world!";

Questions:

What is the value of message.substring(1, 4)?
What is the value of message.substr(1,4)?

Стоит различать функции substring, принимающей в качестве параметров индексы начала и конца, и substr, принимающей в качестве параметров индекс начала и длину выделяемой строки. Также интересно, что message.substr(-1) == "!"

Ответ: "ell", "ello".

Example #5

var o = { x: 8, valueOf: function(){ return this.x + 2; }, toString: function(){ return this.x.toString(); } }, result = o < "9"; alert(o);

Questions:

What is the value result?
What is the value displayed in the alert?

Вся соль в особенностях вызова функций valueOf и toString. Где требуется числовое значение, вызывается первая функция, где строковое - вторая. При сравнении (больше/меньше) вызывается сначала valueOf, а затем toString, если первая не определена. Функция alert требует строку в качестве входного параметра.

Ответ: result == false, "8".

В заключение хочу сказать, что тест оказался простым, но поучительным. А вам как?

Неполадки с фидом

noreply@blogger.com (Сергей | codeBlogZ) — Sat, 13 Feb 2010 12:44:00 +0000

Обнаружил проблемы с каналом RSS, которые благополучно разрешил. Советую переподписаться на фид — http://feeds2.feedburner.com/codeblogz. Если вы заподозрили неладное, дайте знать.

Начинающим изучать Javascript

noreply@blogger.com (Сергей | codeBlogZ) — Fri, 12 Feb 2010 15:12:00 +0000

Продолжаю публиковать полезные и интересные находки, связанные с js. На этот раз — цифровая книга на английском, которая в доступной манере объясняет основы языка. По полной используются возможности интерактивного обучения: все примеры можно запустить в "консоли" самой книги и наглядно убедится в работе кода. Также есть задания для самостоятельного закрепления материала (с ответами, конечно). Толщину книги оценить трудно, но каждый раздел достаточно подробно расписан. Предназначен новичкам, но и другие могут найти для себя что-нибудь полезное.

Ссылка на книгу: Eloquent JavaScript (для печати | в архиве).

Успехов в изучении!

Статьи про Function (declaration | expression)

noreply@blogger.com (Сергей | codeBlogZ) — Wed, 10 Feb 2010 20:22:00 +0000

В свете предыдущего топика и, в некотором роде, забавных ответов на одну викторину в статье JavaScript викторина от perfectionkills.com, хочу посоветовать следующее чтиво по одной из самых запутанных тем в js:

Functions and function scope на сайте Mozilla Developer Center
Named function expressions demystified

Предупреждаю, статьи на английском, однако, все доходчиво расписано, с кучей примеров.

Тесты на знание Javascript

noreply@blogger.com (Сергей | codeBlogZ) — Wed, 10 Feb 2010 14:41:00 +0000

По вебу прокатилось несколько интересных статей на знание тонкостей Javascript:

Вопросы So, you think you know JavaScript? от Дмитрия Барановского и
ответы Answering Baranovskiy’s JavaScript quiz от Nicholas C. Zakas
14 вопросов Javascript quiz (хитрый тест, я ответил правильно наполовину)
и другие...

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

function a() {
}
function b() {
  var a=b=1;
  alert(a); // число
  alert(b); // число
}
function c() {
  b();
  alert(a); // функция
  alert(b); // число??
}
c();

Что выведет этот скрипт и почему? Ответы принимаются в каментах. В свою очередь скажу, что этот код принес мне уйму неприятностей, и определить место проблемы было сродни квесту.

Обновлено. Чуть изменил код примера.

Тестирование и отладка Javascript

noreply@blogger.com (Сергей | codeBlogZ) — Wed, 20 Jan 2010 12:36:00 +0000

В продолжение поста Тестируем проекты на Javascript.

Попалась на глаза очень интересная книжка (в формате PDF) о том, какие бывают средства тестирования и отладки, как ими пользоваться. В описание вошли Firebug, Silenium IDE, библиотеки YUI Test, QUnit, FireUnit, jspec.

Кроме того, разжеваны методы наследования в js, описаны проблемы, связанные с непониманием Javascript, показана техника TDD-разработки, и очень-очень много примеров.

Книга по всей видимости must read. (Я, кстати, ее еще не читал, сознаюсь :) )

Книга за ноябрь 2009
Последнюю версию всегда можно найти в проекте на GitHub-е

P.S. Если вы не в ладах с английским, пользы от такой книги, к сожалению, будет маловато.

3D-графика средствами Javascript

noreply@blogger.com (Сергей | codeBlogZ) — Fri, 15 Jan 2010 11:16:00 +0000

Javascript удивляет. Вобщем-то такую библиотеку должен был кто-то реализовать. И это сделал Dean McNamee. Имя его разработки — Pre3D. Вот, что пишет сам автор:

Pre3d is a JavaScript library, which will project a 3d scene into 2d, and draw it to a <canvas> element ... The library is designed to be low-level and direct, there is no retrained or scene graph API.

Видно, что библиотека построена по принципу проекции объемного изображения в двумерное с использованием модного нынче тэга canvas. Работает под большинством браузеров (это не касается IE).

Сайт проекта и примеры
Исходники

Вы знаете о чем-нибудь подобном?

JS интерфейс для аудио-плэйера

noreply@blogger.com (Сергей | codeBlogZ) — Wed, 13 Jan 2010 22:23:00 +0000

Еще один камень в огород Flash. На этот раз представляю вашему вниманию библиотеку JAI (Javascript Audio Interface) для построения аудио-интерфейсов на основе тэгов <audio> и <canvas> спецификации HTML5. Библиотека свободная и открытая.

Больше сведений по ссылке проекта JAI.

P.S. Кому интересны эксперименты с аудио в браузере, предлагаю почитать серию статей Experiments with audio блоггера David Humphrey.

Проект Gordon и Flash

noreply@blogger.com (Сергей | codeBlogZ) — Wed, 13 Jan 2010 21:58:00 +0000

Очень забавную вещь реализовал Tobias Schneider — выполнение swf-файлов в среде, реализованной на чистом Javascript. Это значит, что флэшки можно запустить в браузере с отключенным Flash плагином. Если разработка будет поддержана сообществом, то в мире веб-разработок на одну маленькую революцию станет больше. Хотя бы потому, что эти самые swf-ки можно будет запустить на iPhone (уже можно).

На данном этапе Gordon нормально функционирует под браузерами Safari, Chrome (падает) и Firefox. Естественно, поддержка swf пока не полная.

Проект
Примеры реализации
Твиттер автора

Статический анализатор кода Javascript

noreply@blogger.com (Сергей | codeBlogZ) — Tue, 12 Jan 2010 20:21:00 +0000

Наткнулся на потенциально интересный инструмент, который для заданного кода рассчитывает его метрику. Называется jsmeter. В надежде получить удовольствие от улучшенных показателей, я подсунул в анализатор старый и новый код проекта, над которым плотно работаю уже третий месяц. Но обилие непонятных цифр меня крайне смутила. Их значение мне не понятно (в вики
очень скупое описание), хотя презентация инструмента их как-то умело и красиво представила... К тому же, подкупает тот факт, что авторами являются разработчики-исследователи из Microsoft. Значит есть в ней какой-то неведомый толк. Но какой?

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

Тестируем проекты на Javascript

noreply@blogger.com (Сергей | codeBlogZ) — Fri, 08 Jan 2010 16:31:00 +0000

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

Переходя от философии к теории замечу, что для многих языков уже сложились свои признанные средства тестирования (здесь и далее речь идет о юнит-тестах). Но в отношении JS не все так просто.

Существуют портированные варианты популярных продуктов (например, JsUnit по аналогии с CppUnit), но они не учитывают особенности самого языка. Да и сам язык накладывает на средства свои ограничения. Самое главное — невозможность подгружать файлы. Есть конечно обходные пути, будь то использование тэга <script>, но все-таки это изврат чистой воды. Как выход — использовать небраузерные интерпретаторы яваскрипта. Самый популярный — Mozilla Rhino. Rhino расширяет функционал языка: импорт файлов, вывод на консоль и др., все что нам требуется.

Кстати. Вы в курсе, что Rhino поставляется в пакете с Java SE (начиная с 6 версии)? Это позволяет расширять функционал java-решения скриптовыми вставками. Мне от этого не теплее, но факт остается фактом :)

Но Rhino не панацея. Необходимо использовать толковое средство тестирования. Как оказалось, их существует приличное количество — от самых простых до серьезных. Обзор некоторых из них можно почитать в Википедии или в статье JavaScript Unit Testing блога DailyJS. Именно та статья вывела меня на просто гениальное решение — JSpec.

JSpec is a minimalistic JavaScript behavior driven development framework, providing simple installation, extremely low learning curve, absolutely no pollution to core prototypes, async request support, and incredibly sexy syntax, tons of matchers and much more.

Как видите, тут вам и BDD, удобство использования, и секси синтаксис. Последнее — это вообще отдельный разговор, потому что синтаксис — чистый DSL (помните CoffeeScript?).

Посмотрите на примеры:

describe 'ShoppingCart'
  before_each
    cart = new ShoppingCart
  end

  describe 'addProducts'
    it 'should add several products'
      cart.addProduct('cookie')
      cart.addProduct('icecream')
      cart.should.have 2, 'products'
    end
  end

  describe 'checkout'
    it 'should throw an error when checking out with no products'
      -{ cart.clear().checkout() }.should.throw_error EmptyCart
    end
  end
end

Как говорится, inspired by Ruby. Точнее, это аналог RSpec для Руби. Мало того, этот инструмент может быть установлен как гем. Это позволяет работать с ним не только в браузере, но и в консоли. Чтобы приступить, нужно совсем немного:

sudo gem install jspec
jspec init myproject
cd myproject
jspec run --rhino

Rhino устанавливается автоматически. Вместо последней строчки, можно использовать более общую команду jspec. Она позволяет в фоне следить за изменениями, и отправлять сообщения через Growl (фича для пользователей MacOS).

Хочу вас сразу предупредить, что JSpec некорректно работает с Руби 1.91 — используйте 1.86. И да, так как сам автор не пользуется виндоподобными операционными системами, то существуют некоторые проблемы с отображением в консоли cmd. Чтобы это исправить, надо заменить функцию color.

Если вас заинтересовал JSpec, то прошу на официальную страницу за дальнейшими разъяснениями.

Мне нравится в нем а) синтаксис, б) удобство, в) простота. А больше и ничего не надо :)

Официальная страница JSpec
Пример использования

Playground для вашего кода (JS + HTML + CSS)

noreply@blogger.com (Сергей | codeBlogZ) — Wed, 06 Jan 2010 20:16:00 +0000

jsFiddle — шелл для работы с великой тройкой. Теперь можно устраивать свои пляски с бубном (ну как еще перевести playground): удобный редактор, который поможет разобраться c поставленной задачей при заданных условиях. Можно подгрузить популярные библиотеки (jQuery, MooTools, YUI и др.). Со своими наработками можно поделиться с друзьями, сохранив их по короткой ссылке.

Альфа-версия оправдывает многие недоработки (мне кажется, или AJAX'ом тут совсем не пахнет?). Но идея неплохая, да.

Когда John Resig просматривает элемент, он видит голые электроны

noreply@blogger.com (Сергей | codeBlogZ) — Tue, 05 Jan 2010 21:03:00 +0000

Это и другое можно почитать в статье John Resig: JavaScript's Chuck Norris

P.S. Кто не в курсе, Джон — автор jQuery.