май 2012
4 мая 2012, 21:51
Добавлено:
— В настройки кластеризатора добавлены synchAdd, minClusterSize, maxZoom.
— Результаты геокодирования можно получать в виде json.
— Для маршрутизатора добавлено событие boundsapply.
— У источника данных слоёв активных областей появились дополнительные параметры — шаблон ключа (keyTemplate) и настройки.
— У геометрий появились методы getClosest и contains.
Исправлено:
— Возникающее исключение в обзорной карте при задании опций основной карте.
— Пропадание фона у многоугольников при плавном масштабировании карты в браузере Opera.
— Некорректное срабатывание в некоторых ситуациях обработчика готовности API ymaps.ready.
— Неверный порядок координат по ссылке на сервис maps.yandex.ru с логотипа Яндекса.
— Некорректная обработка некоторых запросов на геокодирование, содержащих цифры.
— Возникающее исключение при загрузке некоторых файлов YMapsML в браузере Internet Explorer.
— Некорректная работа опции notFoundTile для тайлов, при загрузке которых возникала ошибка.
— Некорректный расчет границ области показа для круга.
Команда разработчиков API Яндекс.Карт.
11 мая 2012, 15:05
Отзывы о мероприятии можно посмотреть по хэш-тегу API Яндекс.Карт #yamapsapi.
Презентации докладчиков ищите на SlideShare.
И бонусом отличный фотоотчет от Елены.
Огромное спасибо тем, кто пришел, кто смотрел онлайн-трансляцию, и всем, кто использует API Яндекс.Карт.
Команда разработчиков API Яндекс.Карт
11 мая 2012, 18:27
Чтобы поддержать тему праздника, давайте проведем свой парад самыx современных вооружений веб-разработчика: тех, что делают поиск ошибок в JavaScript коде не чем-то магическим, а вполне предсказуемым и контролируемым процессом.
Тем, кто не представляет своей работы без методов класса Console, и тем, кто всё еще сражается с ошибками с кремниевым топором alert()-ов, хотим представить краткий обзор полезного инструмента, который де-факто является стандартом, описан в CommonJS и уже реализован во всех современных браузерах в виде Firefox Firebug, Opera Dragonfly или Chrome Developer Tools.
Сейчас это особенно актуально, ведь в API Яндекс.Карт 2.0 появилась возможность работать с API в режиме debug (при подключении API нужно указать в урле параметр mode=debug).
Для веб-разработчиков, использующих API Яндекс.Карт, это важно прежде всего потому, что теперь при отладке кода можно понять, что и где сделано не так.
В качестве примера мы рассмотрим Chrome Developer Tools, или в переводе «Инструменты разработчика».
Именно это расширение стоит использовать по ряду причин: во-первых, оно интегрировано в браузер, а не является аддоном как Firebug, а, во-вторых, оно, как и сам Chrome, работает быстрее, чем Firefox+Firebug, и потребляет меньше памяти.
Возможности, которые предоставляет этот инструмент
Для начала давайте рассмотрим в нем сам объект «console».
Вывод сообщений в консоль:
console.log(Object [, Object ...]
Принимает объект или строку с паттернами (%s — строка, %i (%d) — число, %f — число с плавающей точкой (форматирование не поддерживается), %o —- ссылка на объект)
Если вы передаете строку для подстановки и больше аргументов, то лишние аргументы будут склеены в строку через пробел.
Дополнительные методы (полностью аналогичны log) лишь для разделения уровней логирования:
console.info(Object [, Object ...]
console.warn(Object [, Object ...]
console.error(Object [, Object ...]
Также у Chrome Developer Tools есть поддержка Firebug Command Line API.
Селекторы:
$('id'), не путать с jQuery-селектором — этот метод возвращает элементы только по id.
$$('selector') — позволяет искать элементы в DOM. формат selector соответствует формату querySelectorAll.
$x('xpath', context) — позволяет искать элементы в DOM по xpath выражению (по сути — обертка над document.evaluate).
Печать объектов (в этих методах идентификатор id передается не как строка, а как ссылка на объект):
inspect(id) — очень полезный хэлпер — открывает панель «Elements» и отображает в ней найденный по селектору элемент, в правой панельке показывает его стили.
dir(id) — делает дамп элемента в виде JavaScript-объекта с полями.
dirxml(id) — делает дамп элемента ввиде HTML-дерева.
keys(object) — возращает массив имен полей объекта.values(object) — возвращает массив значений полей объекта.
События
monitorEvents(object, [type]) — подписывает консоль на все или определенные события объекта. В параметре type можно передать массив событий, на которые необходимо подписаться.
Также поддерживаются группы событий
mouse: mousedown, mouseup, click, dblclick, mouse move, mouseover, mouseout, mousewheel.
key: keydown, keyup, keypress, textInput
touch: touchstart, touchmove, touchend, touchcancel
control: resize, scroll, zoom, focus, blur, select, change, submit, reset
Если type не указан, консоль подписывается на все типы событий объекта.
Пример: monitorEvents(window, ['mouse', 'key']
unmonitorEvents(object, [type]) — отписывает консоль от событий.
Группировка сообщений:
console.group('Имя группы сообщений');
console.groupEnd(
Профилирование:
console.time('title') — хелпер для определения времени выполнения.
console.timeEnd()
console.profile('title') — профайлер кода (показывает в отчете, что и сколько раз выполнялось, сколько времени потребовало).
console.profileEnd()
Отладка:
console.trace() — при вызове внутри функции печатает в консоль всю последовательность вызовов.
debugger; - очень полезный хэлпер, останавливает выполнение скрипта в текущем scope (аналог установки breakpoint-а).
Прочее:
clear() — очищает консоль
Панели:
На основной панели Chrome Developer Tools есть очень полезные вкладки:
Elements — отображает DOM-структуру документа.
Resources — ресурсы, используемые документом (cookies, LocalStorage и т.п.).
Network — назаменима для отладки AJAX вызовов и вообще полезная штука — отображает заголовки запросов и ответов, скорость загрузки файлов и т.п.
Script — позволяет просматривать все JavaScript-файлы, используемые на странице, ставить у них точки останова (BreakPoints) и производить навигацию по стеку вызовов.
Желаем вам удачи в ваших сражениях с ошибками. С таким оружием, победа будет за вами!
В следующей статье, посвященной работе над ошибками, мы подробно расскажем об использовании вкладки Script для отладки и поиска ошибок в JavaScript-коде.
Список литературы:
http://habrahabr.ru/post/50445/
http://www.ieinspector.co
http://www.opera.com/dragonfly/
http://getfirebug.com/wik
14 мая 2012, 13:01
Антон Корзунов расскажет о том, как разместить тысячи объектов на карте без увеличения нагрузки на браузер. Его доклад состоится 25 мая в 16:00 в рамках секции «Веб-программирование».
А 26 мая Сергей Перескоков проведет трехчасовой мастер-класс, во время которого он подробно расскажет о том, что изменилось в API Яндекс.Карт 2.0 и покажет, как использовать его возможности. Если вы хотите не просто послушать доклад, а вместе с Сергеем изучить API 2.0 и сделать игру(!), вам понадобятся: ноутбук, базовые знания JavaScript и настроенный сервер для разработки на ноутбуке (Apache, Nginx, Mongrel или какой нибудь другой по вашему вкусу).
Приходите, слушайте, программируйте и задавайте вопросы!
22 мая 2012, 18:05
Сегодня мы продолжим свой рассказ о том, как эффективно искать ошибки в JavaScript-коде, используя «Инструменты разработчика» и API Яндекс.Карт. Для своих тестовых целей мы будем решать простую задачу. Допустим, мы хотим отметить центр карты меткой с соответствующей надписью.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Поиск ошибок</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://api-maps.yandex.ru/2.0.8/?load=package.full&lang=ru-RU&mode=debug" type="text/javascript"></script>
<script type="text/javascript">
var map;
ymaps.ready(function () {
map = new ymaps.Map('YMapsID', {
center: [55.7, 37.5], zoom : 9
});
});
function showMapCenter() {
console.log('in showMapCenter');
addPlacemarkOnMap(createCenterPlacemark());
function createCenterPlacemark() {
console.log('in createCenterPlacemark');
return new ymaps.Placemark(map.getCenter(), { balloonContent : 'Центр карты' });
}
function addPlacemarkOnMap(placemark) {
console.log('in addPlacemarkOnMap');
map.geoObjects.add(placemark);
}
}
showMapCenter();
</script>
</head>
<body>
</body>
</html>
Для отладки нашего функционала мы будем использовать «Инструменты разработчика», которые идут в комплекте с Google Chrome и Яндекс.Интернет.
«Инструменты разработчика» имеют несколько полезных вкладок.
Для задач отладки JavaScript-кода мы будем использовать вкладку «Script».

При выборе этой вкладки под ней в левом углу появляется выпадающий список JavaScript-ресурсов используемых на странице, включая тот JavaScript-код что написан на самой странице, и стрелочки «<» и «>» для их последовательного просмотра.
Например, на рисунке выбран файл combine.xml — сборка всех пакетов (package.full) API Яндекс.Карт.
И если указать магический параметр &mode=debug при подключении API Яндекс.Карт в тэге script, то весь код АПИ приходит к нам в непожатом виде, да еще и документированный JSDoc-ом и это очень здорово.
Щелкнув мышкой на номере нужной нам строчки кода, мы можем поставить точку- флаг (breakpoint) которая остановит выполнение скрипта в этой точке, и поможет оценить наличие и значения всех необходимых для выполнения функции параметров и их значений.
При установке breakpoint-ов справа открывается дополнительная панель:
1. Watch Expression — вы можете добавить на эту панель имя переменной или написать свое выражение JavaScript, которое будет выполнено при остановке.
2. Call Stack — последовательность вызовов функций, до позиции в которой произошла остановка скрипта.
3. Breakpoints — удобный менеджер точек останова, который позволяет включать или отключать некоторые из них, не удаляя их. А также подсвечивает точку в которой остановились.
В самом верху, над описанными панелями есть небольшой, но очень полезный тулбар, позволяющий после остановки скрипта производить навигацию по следующим вызовам методов и JavaScript-выражений.
Давайте рассмотрим функционал его кнопок, слева направо:
1. Кнопка «Pause script execution» (Остановить выполнения скрипта), позволяет продолжить или остановить его выполнение до следующей точки останова (если есть) или до его полного выполнения.
2. Кнопка «Step over next function call» (Перепрыгнуть к вызову следующей функции) — позволяет выполнить текущую функцию и остановить выполнение перед вызовом следующей функции.
3. «Step into next function call» — позволяет «проваливаться» в код функции, что полезно если именно в этой функции происходит ошибка. Можно пошагово перемещаться по выполняющимся в ней операциям, контролировать возвращаемые ими значения, включая объекты области видимости «Scope Variables» на вкладке справа.
4. «Step out of current function» — выйти из текущей функции. Десантирует вас в
scope внешней функции относительно той, в которую вы провалились.
5. «Deactivate all breakpoints» — отключить все точки. Отключить, но не стереть — просто их галочки uncheck-аются на левой панели «Breakpoints».
Итак, давайте откроем консоль и попробуем загрузить нашу тестовую страницу.
Мы получили ошибку в строке 25
TypeError: cannot call method 'getCenter' of undefined
... ну вот, опять 25! =(
Но не унываем и ставим breakpoint на строку «25».

Для этого щелкнем на номер 25 строки на которую ругается консоль, на номере должен появиться синий флажок:
Если у вас открыт редактор кода, то вместо установки breakpoint-а в браузере вы можете добавить в ваш код в нужной строчке «debugger;» и это отработает аналогично.
Перезагружаем страницу в браузере и выполнение нашего JavaScript-сценария должно остановиться на строке 25 непосредственно перед ошибкой. Наводя курсор мыши на объекты, можно посмотреть их методы и значения полей. Например, объект ymaps в нашей сроке определен и имеет 2 метода.
Однако сама карта не определена:

Чтобы выяснить причину, давайте поставим breakpoint на строку кода,
где у нас происходит инициализация карты (строка 13) и еще раз перезагрузим страницу:
Как стало видно инициализация карты не успевает произойти, так как функция, переданная в ymaps.ready, отработает после нашей showMapCenter.
Чтобы исправить ситуацию, перенесем вызов showMapCenter в этот обработчик:
ymaps.ready(function () {
map = new ymaps.Map('YMapsID', {
center: [55.7, 37.5], zoom : 9
});
showMapCenter();
});
Сейчас при перезагрузке страницы все отработает в нужной последовательности и карта отобразится.
Теперь мы знаем что «Инструменты разработчика» и API Яндекс.Карт помогают побеждать ошибки!
Cпасибо за внимание.
30 мая 2012, 14:41
Я.Субботник в Минске
2 июня 2012 года в 9:30 утра приглашаем всех на Я.Субботник в Минске.
За чашкой кофе в дружеской обстановке мы поговорим о современных технологиях, которые важны и интересны разработчикам.
Мы расскажем про методы классификации документов в поиске, зачем нужен поиск для сайта, как с ним работать и его улучшать.
Раскроем подробности про историю создания методологии БЭМ (Блок. Элемент. Модификатор), остановимся на использовании кастомных шрифтов и AJAX в поиске по вебу.
Кроме этого поделимся опытом, как мы делаем code review, расскажем новости про JS API Яндекс.Карт 2.0 и затронем архитектуру Яндекс.Диска.
Мобильным разработчикам посвящаются – доклады про то, как начать разработку под WP7 и как «не прострелить себе ногу», локализуя приложения для iOS.
Дополнительно вас ждет рассказ Алексея Сикорского, руководителя разработки в Беларуси, про офис Яндекса в Минске.
Участие, как всегда, бесплатное, но зарегистрироваться необходимо.
Приходите – будем рады видеть! А если это может быть также интересно вашим друзьям и коллегам – отправьте им ссылку.
Яндекс.Мероприятия, делимся знаниями
31 мая 2012, 14:55
Разработчик интерфейсов API Яндекс.Карт, Антон Корзунов (
Смотрите видео выступления и слайды презентации, задавайте вопросы!