Добрый день уважаемые слушатели. Представляем новый выпуск подкаста RWpod. В этом выпуске:
Метка «javascript» - 35
RWpod. 20 выпуск 01 сезона. Планы на Rspec 3, Webservice Object, Backbone.Giraffe, Slimer.JS и прочее
2013-07-23 в 13:49, admin, рубрики: javascript, ruby, rwpod, web-разработка, Веб-разработка, метки: javascript, ruby, rwpod, web-разработкаJavaScript обработка изображений нативными функциями
2013-07-22 в 13:28, admin, рубрики: image processing, javascript, node.js, nodejs, метки: image processing, javascript, nodejsДоброго времени суток, читатель!
Как-то понадобилась мне в проекте, работающем на node.js, обработка изображений. И чтоб скачал файлик, закинул в папку и подключил как модуль. Ан нет, таких в природе не оказалось. По этому тогда пришлось воспользоваться node-imagemagick. Но сейчас пост не о этой библиотеке.
Пост о том, что захотелось сделать такую библиотеку, которую скачал, закинул файлик в проект, подключил модуль и всё работает! Ну и сделал. Правда поддержка gif'ок не реализована, но я надеюсь на огромное сообщество, которое заинтересуется и поможет доделать библиотеку.
Назвал её по простому, imageLib.js, и на github выложил, правда под MIT.
Читать полностью »
Полноэкранный, масштабируемый div, соблюдающий пропорции ширины, высоты и текста
2013-07-22 в 13:08, admin, рубрики: javascript, resize, веб-дизайн, Веб-разработка, метки: javascript, resizeЗдравствуйте! На днях мне выпала задача написать «заглушку» на сайт, который прекратил своё существование. Дизайнерское решение заключается в создании видео на котором изображён старый сайт, напечатанный на листке, плавно поглощающийся офисным утилизатором бумаги. После окончания ролика должна появиться надпись «Старого сайта больше нет. Скоро будет новый.», логотип компании, ссылки на Facebook и Google+, а также контактная информация.
Видео посредством Css размещается на всю ширину или высоту вьюпорта, в зависимости от экрана пользователя, сохраняя свои пропорции. То есть, если у нас видео с разрешением 1280 x 1024, то при ресайзе окна браузера, его разрешение будет меняться пропорционально: 1000 x 800, 600 x 480.
Так вот, основная загвоздка в том, что поверх видео нам нужно создать блок с такими же свойствами и размерами, причём весь контент в блоке должен масштабироваться так же, как если бы мы ресайзили не сам блок с наполнением, а картинку или его скриншот.
Читать полностью »
Как захватить мир, или javascript next уже сейчас
2013-07-22 в 8:25, admin, рубрики: harmony, javascript, метки: harmony, javascriptДоброго времени суток дорогой читатель. Я очень люблю все новое и красивое и поэтому очень часто посматриваю за развитием ecma 6 aka Harmony. Да-да, вы не ошиблись, речь пойдет именно о новом javascript, хотя он еще в разработке, но многие фичи уже сейчас можно начать тестировать, так сказать, просто для своего удовольствия.Читать полностью »
Записки создания backendless приложения. Часть 1: о проекте и выбор окружения
2013-07-21 в 11:29, admin, рубрики: angular, angular.js, AngularJS, bower, coffescript, compass, grunt, haml, javascript, sass, slim, yeoman, Веб-разработка, метки: angular, angular.js, AngularJS, bower, coffescript, compass, grunt, haml, javascript, sass, slim, yeomanВсем привет, меня зовут Макс и я отвечаю за разработку в компании DevHub
Я fullstack разработчик. У меня за плечами богатый опыт как создания backend (PHP а затем Django) так и клиентских приложений. Но все-таки я никогда не работал с чем-то что не имело под ногами бекенд написанный мной.
Я хочу это исправить и заодно поделиться тем как это происходило.
Модные Ключевые слова: Yeoman, CoffeeScript, AngularJS, SLIM, Compass, Kinvey под катом
WebRTC PeerConnection и DataChannel: обмен данными между браузерами
2013-07-20 в 19:51, admin, рубрики: html5, javascript, p2p, Peer-to-Peer, WebRTC, Веб-разработка, метки: html5, javascript, p2p, WebRTC 
Многие слышали о проекте WebRTC, поэтому я не буду углубляться в описание. На днях мне захотелось попробовать отправлять сообщения между браузерами, и чтобы разобраться в этом, я решил написать примитивный P2P-чат. Эксперимент удалался, и по мотивам я решил написать этот пост. На Хабре уже были статьи, освещающие вопросы использования WebRTC для передачи видео, однако меня в первую (и последнюю) очередь интересовала возможность обмена текстовыми или бинарными данными.
Читать полностью »
Карта с проекциями из Proj4js на Canvas
2013-07-19 в 18:59, admin, рубрики: canvas, egaxegax, html5, javascript, map, proj4js, projection, Веб-разработка, карта, проекции, метки: Canvas, egaxegax, html5, javascript, map, proj4js, projection, карта, проекцииИдея
Решил написать пост о популярном нынче Canvas из HTML5 и о своем проекте dbCartajs, его использующем. Почему Canvas? Немного истории. Прежде для создания изображений, иллюстрирующих различные расчетные модели (например, вывод окружности по радиусу и центру в координатах, вывод многоугольника с количеством вершин N и площадью S, вывод окружности на сферу и т.д.), я и мои коллеги по работе в институте использовали различные элементы управления из разных сред разработки: PictureBox их VB6, QPainter и QCanvas из Qt, Canvas из Tk и, наконец, создание изображений по mapfile из MapServer. Позже после знакомства с возможностями HTML5 я решил перейти на использование Canvas и Web-разработку с JavaScript. Удобно — для отладки и разработки нужен лишь браузер. Собравшись с силами и вооружившись документацией от W3C, я переписал часть функционала компонентов, которые мы используем в работе, на JavaScript, оформив это в проект dbCartajs на GitHub. Код реализован в виде объекта dbCarta, чтобы использовать его как виджет на страницах без копирования частей исходного кода.
Читать полностью »
Karma — тестируем javascript в консоли
2013-07-19 в 4:22, admin, рубрики: AngularJS, javascript, tdd, метки: AngularJS, 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 и веб-технологий 2013-го года
2013-07-18 в 14:59, admin, рубрики: canvas, grunt, headtracking, javascript, jslint, testing, web workers, браузерные игры, веб-аналитика, Веб-разработка, метки: Canvas, grunt, headtracking, javascript, jslint, testing, web workers, браузерные игрыВсем доброго дня!
Проанализировав множество блогов, докладов, презентаций, посетив пару конференций и пообщавшись на них с веб-разработчиками разного профиля, я выделил для себя основные направления в области JavaScript-разработки, которые активно развиваются или только начинают развиваться (и, по моему мнению, им стоит уделить внимание в целях ознакомления). Цель статьи – осветить их, и дать пищу для размышлений, как именно полученные знания можно было бы применить на практике.
Применение JSON-Schema в тестировании и документировании API
2013-07-16 в 6:15, admin, рубрики: javascript, json, json-schema, XML, Блог компании 2ГИС, документация, разработка, метки: javascript, json, json-schema, XML, документация Справочный API 2ГИС разрабатывается уже 4 года. Появилось около 40 методов, которые возвращают достаточно крупные и иерархически сложные структуры в формате JSON и XML. Совсем недавно я решил поделиться накопленным опытом и выступить на конференции DevConf.
Одна из тем доклада вызвала наибольший интерес у участников — это использование JSON-Schema при тестировании формата выдачи API. В этой статье я расскажу, какие задачи решает этот подход, какие имеет ограничения, что вы получаете из коробки, а что идёт бонусом. Поехали!
