Рубрика «javascript» - 433

IP АТС в облаке своими руками за 10 минутМногие из читателей Хабра знакомы с современными IP АТС в облаке, такими как Манго, Oktell, Октолайн и другими. Все они предлагают различные функции и тарифные планы, чтобы удовлетворить самых разных клиентов и соответствовать их требованиям, но всегда есть ряд тех кто все равно выбирает Asterisk, так как хочется иметь возможности по кастомизации и интеграции, которые кроме как Asterisk мало какая система способна предложить. В дополение к самому Asteriskу еще потребуется человек, который будет способен все настроить и его поддерживать, отдельное подключение к оператору связи по SIP или через VoIP-шлюз и так далее. Когда мы начали создавать свою облачную платформу для разработки комуникационных приложений VoxImplant, то, конечно же, знали, что одним из популярных сценариев ее использования будет IP АТС, поэтому реализовали весь необходимый для этого функционал. В отличие от случая с Asterisk человеку, который решит сделать свою IP АТС на базе VoxImplant, понадобится лишь знание Javascript, ознакомление с этой статьей и свободных 10-15 минут, чтобы получить на выходе первую рабочую версию АТС, которую потом в дальнейшем можно будет интегрировать со своими сервисами и кастомизировать в соответствии со своими требованиями. Подробнее об этом код катом.
Читать полностью »

JavaScript: цикличные таймеры с автокоррекцией

В посте в повествовательной и не очень манере рассказывается о различных реализациях «точных» таймеров на JS. Материал рассчитан на новичков… Добро пожаловать под кат.Читать полностью »

Пока JavaScript не обзавёлся настоящими модулями мы продолжаем импровизировать.
Так появилась на свет ещё одна реализация модулей — definer.

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

Для хорошего понимания идеи, под катом примеры от простого к сложному.

Читать полностью »

Уже довольно давно у веб-приложений появилась возможность хранить часть данных или файлов локально. Можно даже кешировать MP3-файлы. Браузеры научились хранить немалые объёмы данных. Тем не менее, пока что технологии локального хранения сильно фрагментированы.

localStorage предоставляет лишь самые базовые функции, это хранилище довольно медленно и не умеет хранить блобы. IndexedDB и WebSQL асинхронны, быстры и поддерживают большие объемы данных, но их API довольно запутан. Кроме того, ни IndexedDB, ни WebSQL не поддерживаются всеми основными браузерами, и, похоже, в ближайшем будущем эта ситуация не изменится.

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

Почувствовать на своей шкуре все сложности работы с локальным хранилищем мне помогла разработка around — HTML5-клиента для Foursquare. Хотя в этой статье я рассказываю, как использовать localForage, возможно кто-то предпочтёт изучить реальные примеры работы с ней.

localForage — очень простая библиотека JavaScript, которая использует API, похожий на API localStorage, с теми же самыми базовыми методами get, set, remove, clear и length, но имеет ещё несколько важных улучшений:

  • асинхронный API с колбэками;
  • драйвера IndexedDB, WebSQL и localStorage (самый подходящий драйвер выбирается автоматически в зависимости от возможностей браузера);
  • поддержка блобов и произвольных форматов данных, так что можно хранить изображения, файлы и так далее;
  • поддержка обещаний ECMAScript 6.

Использование IndexedDB и WebSQL позволяет хранить намного больше данных, чем localStorage. Неблокирующий асинхронный API делает приложение более быстрым и отзывчивым, так как основной поток приложения не подвисает во время выполнения вызовов get/set. Поддержка обещаний позволяет писать чистый код без спагетти из колбэков. Конечно, если вы любите колбэки, можно использовать и их.
Читать полностью »

image Ember.js сложный в обучении. Хотя даже не так. Концепты Ember.js сложны в освоении и понимании. Мне кажется, что любой курс обучния Ember.js должен начинатся с этих слов.

Я разработчик работающий с Ruby on Rails (до этого я программировал в .NET и Python). Для меня было довольно проблематично понять магию заставляющею Ember.js работать. Я иногда общаюсь с другими начинающими разработчиками вставшими (или пытающимися встать) на путь Ember.js — все их проблемы начинаются из за того что они не понимают как устроен данный фреймворк.

Да, с одной стороны есть официальная документация в которой детально описаны все аспекты данного фреймворка. Но ей не хватает концепции; для начинающего разработчика это просто осколки информации разбросанные случайным способом. Из документации, например, можно узнать что у нас есть в арсенале контроллеры, модели и виды (controller, model, view). Но для того что-бы узнать за что они отвечают и как работают начинающему разработчику предлагают сначала наступить на грабли пару десятков раз. Плюс в нагрузку к контроллерам, моделям и видам Ember.js нам дает целый взвод разношерстых объектов типа компонентов, шаблонов, маршрутизатора и путей (component, template, router, route).

Читать полностью »

Bootstrap Modal Iframe Костыль
«Не надо, я сам»
Хромой Итальянец

Постановка задачи

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

Сразу дали понять, что партнёры, хоть и партнёры, но размещать у себя что-либо сложное не будут, то есть про jQuery забыли. Стандартное решение – iframe с минимальной функцией resize на голом JavaScript.

Читать полностью »

Для увеличения гибкости использования директив, я добавил «препроцессор» для директив. Он вызывается в момент «подключения» директивы в DOM. Вы можете расширить его либо заменить на свой, что дает такие возможности как:

  • Добавление своих атрибутов в директивы (наподобие template, templateUrl, scope ...)
  • Преобразование директив и их подмена
  • Смена местоположения директив, например в хранить часть директив в scope (ну а вдруг захочется)

Далее пара примеров:Читать полностью »

При реализации задачи таймера обратного отсчёта столкнулся с одним «сюрпризом», а именно методом getTimezoneOffset, который отдавал то 3 часа, то 4 часа разницы. Этим хотел бы и поделиться.
Читать полностью »

Ввиду живого интереса к прошлой статье о библиотеке Smartbox, которая призвана стать основой для любого кроссплатформенного SmartTv приложения, я решили описать, как же создать такое приложение разом для трёх вендоров SmartTv устройств:

image

Читать полностью »

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

Рассмотрим на примере. Мы работаем над дизайном сервиса, осуществляющего хранение видеозаписей. Пользователи могут как покупать понравившиеся им видеозаписи, так и просматривать личное видео. Если они подписываются… им нужен значок для покупки видео, и мы можем использовать диалоговые окна для предоставления возможности покупки и покупательного процесса.

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

Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js