JavaScript *

Apple HTTP Live Streaming — широко распространенная технология для доставки видео на мобильные устройства, которая делает ставку на простоту, универсальность и проходимость. В качестве протокола доставки используется самый простой, доступный и проверенный протокол Интернета HTTP, что позволяет доставить видео практически на любое устройство или ПО в сети.

Ниже под катом рассматривается альтернатива — Websocket Streaming для iOS Safari и подробно описывается процесс тестирования.

На Хабре было уже довольно много статей про новые возможности стандарта ECMAScript 6 (например,«Отказываемся от коллбэков: Генераторы в ECMAScript 6») и многие используют эти возможности.

Используя примеры из приведенной статьи, мы можем:
1. Легко написать любой итератор, например, итератор по дереву
2. Написать псевдо-синхронный код (борьба с callback)

Но что делать, если нам надо написать рекурсивный итератор по дереву, а получение дочерних узлов требует вызова асинхронной функции с передачей callback?

Простой рекурсивный итератор (без вызова асинхронных функций) мог бы выглядеть довольно просто и кратко:

function* iterTree(treenode) {
    var children = getChildren(treenode);
    if (children) { // inner node
        for (let i=0; i < children.length; i++) {
            yield* iterTree(children[i]); // (*) recursion
        }
    } else { // leaf node
        yield treenode;
    }	
}

Приведенный выше пример прост, поскольку использует синхронный вызов функции getChildren. Если же функция getChildren асинхронная и требует передачи callback (например, это получение данных с диска или по сети) – то все существенно усложняется. Мы уже не можем так просто написать (следуя примерам из приведенной выше статьи)

let children = yield getChildren(treenode, resumecallback);

В этом случае функция iterTree остановится в месте вызова оператора yield и передаст управление вызывающей функции. Но у нас рекурсивная функция – и вызывающая функция тоже передаст управление выше (оператор yield *). В результате пользователь нашего итератора будет получать узлы дерева, перемежаемые неожиданными значениями.

Предыстория

Одно из самых больших упущений JavaScript это невозможность создания приватных полей в пользовательских типах. Есть только один хороший путь создания приватной переменной внутри конструктора и создания привилегированных методов, которые будут иметь к ним доступ, например:

function Person(name) {
    this.getName = function() {
        return name;
    };
}

В данном примере метод getName() использует аргумент name (по факту являющийся локальной переменной) для возврата значения имени персоны без раскрытия name как свойство объекта. Данный подход вполне себе подходящий, но очень неэффективен с точки зрения производительности. Как вы знаете функции в JavaScript являются объектами и если вы используете больше кол-во экземпляров объекта Person, каждый будет хранить свою копию метода getName(), вместо того, что бы использовать всего один из прототипа.

Предисловие

В данной статье я поделюсь с вами опытом, как быстро и безболезненно создавать простые плагины для gulp. Статья ориентирована на таких же чайников, как и я. На тех, кто до сих пор лишь использовал готовые плоды gulp, срывая их с великого Древа Познания NPM, и не имел серьезного опыта работы с Node JS и его стримами.

Я не буду отвечать на вопросы вида «А зачем создавать свои плагины, если уже написано все, что только возможно?». Придет время, и вам за полчаса нужно будет написать что-то очень специфичное для вашего проекта. Перерыв весь npm, вы найдете один заброшенный плагин с убогим функционалом, автор которого недоступен, код ужасен и так далее. А может быть, это будет настолько специфичная задача, что вы не найдете абсолютно ничего.

Такой задачей для меня стала визуализация большого проекта, использующего Angular JS. Было огромное количество angular-модулей, связи между которыми были для меня уже не столь очевидными. Плюс мне хотелось видеть «диверсантов» — модули, которые каким-либо образом нарушали общую концепцию проекта (например, лезли в другой модуль не через провайдера, а напрямую).

Поискав, я нашел такое решение своей задачи. В принципе, запускать grunt плагины в gulp достаточно просто, но реализация в этом плагине меня не слишком впечатлила. Мне не хотелось использовать сторонние программы, а именно graphviz в качестве средства визуализации графа. Плюс ко всему, кто знает, что мне потребуется еще, а зависимость от сторонних библиотек всегда налагает ограничения.

Если читателя интересует лишь этот плагин, а не сама статья, то вот ссылка на проект на github и на npm. Всем остальным — добро пожаловать под кат.

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости.

В этом посте решил поделиться с хабрасообществом своей подборкой справочников и обучающих ресурсов для web-разработки, в основном на javascript. Она будет полезна тем, кто недавно начал заниматься frontend-разработкой и хочет иметь под рукой выборку удобных справочных материалов для работы.

Всех поздравляю с майскими праздниками. Сегодня хочу поделиться опытом использования ECMAScript 6(ES6). Мотивацией для написания статьи было отсутствие полного поэтапного руководства по использованию ES6, а точнее системы модулей с помощью транспилятора Babel. Кому интересно — добро пожаловать!

Наверное, многие слышали про тулбар от Билайн. С их стороны этот сервис вежливо назван "Мини-кабинет".

«Мини-кабинет» – это сервис самообслуживания в браузере, с помощью которого можно узнавать баланс, остаток интернет трафика, управлять услугами связи и менять тарифные планы, а также получать ссылки на полезные сервисы от «Билайн»

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

Однако, Билайн решил пойти еще дальше и начал добавлять на сайты тулбар с поиском mail.ru.

Привет.

Сегодня я попробую рассказать, как написать простенькую, но вполне рабочую систему Email-приглашений для своего Meteor приложения.

Зачем это может понадобиться? Например — если вы разрабатываете приложение, в котором несколько людей должны работать в рамках одной группы над каким-либо проектом. Это может быть к примеру учебное расписание, которое может редактировать несколько людей или каталог продукции Интернет-магазина компании.

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

Итак, наш пример будет уметь:
1) Отображать интерфейс приглашений включая список существующих приглашений и форму для отправки нового;
2) Сохранять все приглашения в базе данных;
3) Следить за статусами приглашений;
4) Отправлять приглашения на email;
5) Следить за ролями пользователей;
6) Активировать приглашения новых пользователей;
7) Использовать кучу сторонних модулей.

Внимание: Пример будет рассмотрен на основании живого проекта, так что просто скопировать и вставить его к себе, вероятно, не получится…

В первой части мы сделали простой плагин для JIRA для работы с базой данных. Теперь придадим нашему плагину «стандартный» внешний вид JIRA.



Для начала добавим немного функционала в наш плагин. Пусть теперь для каждого проекта будет свой список студентов, т.е. студент будет привязан к строго одному проекту, и добавим студентам фамилии на всякий случай. Соответственно, нам придется переделать и выдачу студентов. Выдавать теперь будем только студентов, привязанных к определенному проекту. Для этого нам придется переписать класс Students, добавив туда необходимы атрибуты студента; добавить в интерфейс StudentDAO (и само собой класс StudentDAOImpl) новый метод для получения списка студентов именно для проекта; и переписать в классе MyAction методы execute() и doAdd() в соответствии с новыми изменениями.

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

<script>document.getElementById('progress').style.width = '1%';</script>

Этот вариант меня не устраивал по нескольким причинам, к тому же мне в принципе не нравится такой подход.

Хочу поделиться своей небольшой библиотекой. Интересно услышать ваше мнение о ней.

Сразу к сути дела: htmlmake — это js-функция, позволяющая создавать строку с html-разметкой внутри для дальнейшей вставки в DOM-дерево.

Многие посетители сайтов не знают о поиске по странице по нажатию Ctrl+F и ищут необходимый фрагмент глазами, просто пролистывая текст. Этот способ становится проблематичным, если на странице текста больше, чем три-четыре экрана. Для таких посетителей я решил реализовать поиск по странице с использованием jQuery.
Пример подобного поиска есть на сайте Конституции РФ, но там он работает как-то странно.

Добро пожаловать в серию «ES6 в деталях»! В этой еженедельной серии статей мы будем изучать ECMAScript 6 — новую готовящуюся к выходу спецификацию языка JavaScript. ES6 имеет множество новых возможностей, которые делают JS мощнее и выразительнее, и каждую неделю мы будем рассматривать эти возможности. Но прежде чем мы приступим, неплохо бы поговорить о том, чем является ES6 и что от него ожидать.

Сегодня я хочу показать, как используя React, Flummox и Express, создать полноценное изоморфное приложение.

Идея изоморфности давно витала в воздухе, но никто не знал этого слова, поэтому ничего особо не менялось, пока не пришел airbnb.

За полгода до этого появился React, позже появился Flux и множество его реализаций, одна не хуже другой. Но все эти реализации ориентировались только на работу на клиентской стороне, они работали через синглтоны и, зачастую, их нельзя было нормально использовать на сервере. Я успел попробовать несколько, но ни одна мне не понравилась. Пока два месяца назад я не наткнулся на Flummox. Как заявляет разработчик, Flummox создан как раз для изоморфных приложений, он не использует синглтоны, присущие другим реализациям, и максимально прост в использовании.

Ожидается, что вы имеете опыт работы с React и слышали про Flux. Итак, поехали…
Забрать готовый код можно тут.

За последний год я много слышал о Virtual DOM и React JS.
React работает действительно быстро и очень прост, но как он работает? Что такое Virtual DOM? Почему я должен беспокоиться об этом, и что случилось со старым добрым обычным DOM?

Что такое DOM

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

Вступление

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

Сама мысль

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

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

Плагин буду делать для джира 4.4.4. Для начала создадим пустой проект. Проект можно создать с помощью Atlassian SDK, а затем открыть в любимой IDE. В данном случае я буду работать с Netbeans. Файловая структура проекта будет выглядеть следующим образом:

18 апреля Frontend Dev Conf в третий раз собрала frontend и UI-специалистов. Участниками стали более 300 разработчиков. Мероприятие прошло в дружелюбной атмосфере, приятных кулуарных разговорах и жарких дискуссиях с докладчиками.

Native script (NS) – это библиотека, позволяющая делать кросс-платформенные приложения, используя XML, CSS, JavaScript. Native script решает ту же задачу, что и уже всем известный phonegap (создание кросс-платформенных приложений), но подходы у них разные. Phonegap использует движок браузера, чтобы отобразить ваш UI (фактически вы получаете веб-страницу), Native script использует нативный рендеринг, использует элементы нативного UI. Следующее важное отличие: чтобы получить доступ к камере, gps и так далее в phonegap необходимо устанавливать плагины, в то время как NS дает доступ из коробки.