JavaScript *

Доброго времени суток дорогой хабраюзер. Я очень люблю все новое и красивое и поэтому очень часто посматриваю за развитием ecma 6 aka Harmony. Да-да, вы не ошиблись, речь пойдет именно о новом javascript, хотя он еще в разработке, но многие фичи уже сейчас можно начать тестировать, так сказать, просто для своего удовольствия.

Сегодня разные производители предлагают десятки разных (и часто несовместимых между собой) систем, устройств, приложений и интерфейсов для превращения обычного дома или квартиры в «умный» — интеллектуальные дверные замки и лампочки с управлением по WiFi, розетки, датчики и выключатели с аккаунтом в Твиттере, интернет-холодильники кондиционеры. Стартап WigWag, который уже собрал на Кикстартере почти в четыре раза больше денег, чем планировал, подошел к вопросу создания умного дома более системно. Они предлагают не просто набор сенсоров и актуаторов, но и целую инфраструктуру, совместимую со множеством уже существующих интеллектуальных электроприборов, и, что ещё важнее — открытую для модификаций и дружелюбную как к простым пользователям, так и к программистам и хакерам.

WigWag позволяет создавать «правила», подобные рецептам IFTTT, которые могут на основе информации с датчиков или из интернета управлять любыми устройствами. Это могут быть датчики и актуаторы WigWag, интернет-сервисы, Raspberry Pi, Arduino, Belkin WeMo, Philips Hue, и любые другие, поддерживающие протоколы IP, RS-232, 6loWPAN, Bluetooth и Zigbee. Причем создавать правила можно не только через графический интерфейс, но и на JavaScript, с помощью среды выполнения DeviceJS, которую разработчики WigWag позиционируют как способ писать приложения для умного дома точно так же, как пишутся приложения для Web.

Распространение LESS/SCSS, а также ожидаемые движения в мире браузеров и стандартов, появление jQuery, наконец, вернуло фан в вёрстку HTML-страничек и во фронт-энд разработку.
Но представьте, что вам требуется сверстать раздел в интернет-магазине, раздел блога, или целую главную страницу Хабра? Да, мы делим страницу на отдельные блоки и делаем для них разметку, порождаем множество вложенных блоков, делаем для них CSS/LESS/SCSS. Безусловно, существуют такие замечательные средства как Zen-Coding, шаблонизатор jQuery Templates, а для построения сеток (grids) — всевозможные CSS-фреймворки, наподобие Bootstrap или же Zurb Foundation.

Но часто хочется посмотреть как же ведет себя вёрстка списков, когда в них не один только что свёрстанный элемент, а множество элементов. Наверняка, вы копипастили хотя бы раз в жизни разметку блока, чтобы заполнить страницу контентом, особенно когда под рукой нет запущенной любимой CMS или веб-фреймворка с шаблонизатором. А потом удаляли копипасту. Или что хуже, вы из тех, кто получает «в нарезку» HTML'ки от тех, кто верстает, и вам необходимо удалять эту копипасту самим.

Решил написать пост о популярном нынче Canvas из HTML5 и о своем проекте dbcartajs, его использующем. Почему Canvas? Немного истории. Прежде для создания изображений, иллюстрирующих различные расчетные модели (например, вывод окружности по радиусу и центру в координатах, вывод многоугольника с количеством вершин N и площадью S, вывод окружности на сферу и т.д.), я и мои коллеги по работе в институте использовали различные элементы управления из разных сред разработки: PictureBox их VB6, QPainter и QCanvas из Qt, Canvas из Tk и, наконец, создание изображений по mapfile из MapServer. Позже после знакомства с возможностями HTML5 я решил перейти на использование Canvas и Web-разработку с JavaScript. Удобно — для отладки и разработки нужен лишь браузер.

Здравствуйте. Признаюсь честно, я пишу тесты редко. Т.е хотел бы чаще, но все как-то не получается. Вроде и руководство в принципе не против даже, но все равно находятся задачи посрочнее и поважнее. Тем не менее на днях заглянув в redmine обнаружил что задач практически нет (точнее они были, но требовали сперва дождаться бэкэнда).
Что ж, самое время вспомнить про тесты (конечно нужно было раньше о них думать, но лучше поздно чем никогда).
Вообще я до этого уже пробовал писать тесты, в том числе и на бэкэнде, а конкретно django. Я еще тогда подумал что было бы здорово запускать тесты из консоли а не в окне браузера. Ну а поскольку с недавнего времени я активно слежу за развитием angular, то почему бы не посмотреть как это сделано у них. Тем более как-то краем глаза я зацепил момент, что там тесты как раз запускаются в консоли. Плюс к тому же с нуля разбираться в премудростях тестирования не хотелось и я решил взять какой нибудь готовый проект с тестами, посмотреть как оно сделано, и погонять собственно тесты на нем. Мой выбор пал на angular-ui, а точнее на один из его модулей ui-utils.

Скачиваем, заходим в корень видим папку test а в ней файл karma.conf.js
Да и в самом ридми написано, что тесты запускаются так karma start —browsers ….
Гуглим karmajs и находим то что нам нужно karma-runner.github.io/0.8/index.html
Утилита для тестирования. Итак что она может?

• Запускать тесты из консоли
• Автоматически прогонять все тесты при каждом сохранении!!!
• Возможность писать тесты на множестве фреймворков, таких как jasmine, qunit и др.
• Прогонять тесты сразу на нескольких браузерах. (в том числе виртуальных, например fantomjs).

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

Всем доброго дня!

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

Справочный API 2ГИС разрабатывается уже 4 года. Появилось около 40 методов, которые возвращают достаточно крупные и иерархически сложные структуры в формате JSON и XML. Совсем недавно я решил поделиться накопленным опытом и выступить на конференции DevConf.
Одна из тем доклада вызвала наибольший интерес у участников — это использование JSON-Schema при тестировании формата выдачи API. В этой статье я расскажу, какие задачи решает этот подход, какие имеет ограничения, что вы получаете из коробки, а что идёт бонусом. Поехали!

Как известно, расширения для браузера Chrome работают каждое в своей песочнице. Для внедрения в веб-страницу существует механизм content script-ов, когда javascript код внедряется в страницу, и имеет доступ к DOM дереву. Этот механизм позволяет работать с контентом страницы, изменять внешний вид, запускать произвольный JS, обмениваться данными с фоновым процессом расширения.

Но одну вещь механизм content script не позволяет делать — получать доступ к javascript-окружению веб-страницы.

Для админки возникла задача – сделать удобным ввод ip-адресов.
Существующие плагины не устраивали тем, что они либо не точно проверяли формат и позволяли вводить ip типа 264.734.443.332, или не умели сами ставить разделители, или при вводе октета большего чем 255 уменьшали до наименьшего, т.е. при вводе 665 вместо того, чтобы поставить разделитель точку после 66, т.е. сделать 66.5 уменьшали до 255, т.е. никакого удобства.

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

Не так давно, для одного проекта потребовалось написать карту, которая будет отвечать следующим требованиям:

• Плавная прокрутка
• Подгрузка областей карты

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

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

Доброго времени суток, уважаемый читатель! В прошлый раз мы изучали процесс создания интерактивной карты-хороплета, теперь предлагаю немного усложнить задачу и перейти к трёхмерной модели Земли, именуемой в народе глобусом. Глобус делать будем двух видов: SVG версия и Canvas версия. В обоих случаях будем использовать JavaScript библиотеку d3.js. У каждого варианта свои преимущества. В моём исполнении Голубая планета выглядит следующим образом:



А как создать свой собственный Мир с материками и океанами можно узнать под катом.

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

Задача

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

Опять делать простые вещи сложным html+css кодом? Опять каждый браузер будет отображать страницу по-своему? Опять возиться с кроссбраузерностью? Писать хаки?

И почему таких проблем нет в desktop-программировании? Менять размеры элемента по формуле – пожалуйта. Пододвинуть кнопку левее на 17 пикселей – пожалуйста. Устроить принципиально разное расположение элементов в строгой зависимости от размеров окна – нет проблем! И только в html+css с этим могут возникнуть подобные трудности. Однажды я чуть не потерял заказчика, когда затянул с задачей «пододвинуть блок немножечко выше и левее»… мне пришлось основательно переделать всю вёрстку, потому что старая структура на такие перемещения блока рассчитана не была. Труд этот был не оценен, и поделом, ведь в результате я всего лишь пододвинул блок.

Первое и единственное мероприятие в нашей стране, посвящённое знаменитому JavaScript фреймворку — конференция jQuery Russia, при активной поддержке портала Айти-Событие.рф, состоится 15 октября в центре Digital October в Москве.




Старт ежегодной конференции jQuery был дан в 2007 году в Бостоне, и с тех пор по всему миру состоялось около двух десятков конференций под этим брендом, в том числе в Вене, Оксфорде, Сеуле, Портланде и Сан-Франциско. Осенью этого года силами ITmozg знаменитая конференция впервые пройдет в России.

Для затравки — громкое заявление: эта статья способна оставить без работы тех backend-разработчиков, которые еще не познали дао Javascript. Если вы подумали о Node.js, то напрасно. Ни строчки серверного кода. Мы поговорим о CMS, которая работает в любом современном браузере.

Обрабатываете много данных в браузере?
Хотите отправлять их обратно на сервер?
Да так, чтобы отправлялось побыстрее и помещалось в один http запрос?

В статье я покажу как мы решили эту задачу в новом проекте, используя сжатие и современные возможности javascript.

Доброго времени суток уважаемые хабражители. Сегодня увидел один интересный проект на GitHub. Эта маленькая библиотека (Voyeur.min.js — 1.2kb) очень привлекает своим синтаксисом и неплохим функционалом.



Даже не переводя документацию с официального сайта, код можно понять интуитивно. По традиции приведу несколько примеров:

Привет, Друзья!

Гитхаб — прекрасный сайт. Но представьте, что вы нашли проект А, и хотите узнать какие еще существуют похожие проекты. Как быть?

Именно с таким вдохновением уселся я разбирать API GitHub'a. Спустя пару недель свободного времени вот что получилось:



Для большинства проектов находится пара действительно интересных предложений. Вот несколько примеров: angular.js, front end bookmarks, three.js

Основная идея для построения рекомендаций — «Разработчики которые поставили звездочку этому проекту, также поставили звездочку...». А детали идеи, ее недостатки и ссылка на код — ниже.

Для работы с SVG есть очень много библиотек для рисования. Мы рассмотрим плагин для jQuery.

Добрый день.

В разработке интерфейсов иногда можно встретиться с задачей выделения вводимого пользователем текста в зависимости от определенных условий. (Например, была реализована серверная проверка грамматики, либо необходимо выделять определенным цветом те или иные слова\участки и т.д.)
Однако, элемент textarea не поддерживает html\bb теги. Как один из способов решения — использование contenteditable в элементах div.
В данной небольшой статье я предлагаю более-менее подробно рассмотреть способ выделения текста, используя textarea.