Обновить
128K+

JavaScript *

Прототипно-ориентированный язык программирования

246,09
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Скрещиваем WebWorker и Promise

Время на прочтение2 мин
Охват и читатели6.1K
Если уж есть необходимость скрещивать WebWorker с XMLHttpRequest, то пора бы скрестить его с любой функцией, а заодно разобраться с обещаниями ES6.

Цель — научиться делать вот так:
new PromiseWorker(array => array.sort()).Invoke([3,2,1]).then(result => console.log(result));
(Здесь и далее используются arrow functions для краткости)

Читать дальше →

Скрещиваем WebWorker и XMLHttpRequest

Время на прочтение3 мин
Охват и читатели7.4K
WebWorker+XMLHttpRequest

HTML5 уже никого не удивляет, но у многих новичков возникает много вопросов. Особенно вопросы связаные с параллельными потоками, а именно с WebWorker. Дальнейшее повествование требует знания JS и HTML — я не буду разжевывать основы html и js.
Сегодня мы рассмотрим как обернуть в WebWorker обычный XMLHttpRequest.
Читать дальше →

Как использовать Handlebars

Время на прочтение2 мин
Охват и читатели64K
В настоящее время веб-сайты все больше используют JavaScript для создания динамических интерфейсов обновляя данные и манипулируя DOM деревом. Если использовать шаблонизатор, реализующий шаблон View/Controller, код становится чище, его легче модифицировать.
Читать дальше →

Делегирование событий в AngularJS. Попытка разобраться

Время на прочтение2 мин
Охват и читатели15K
Евгений Гришковец, спектакль 'Как я съел собаку'Гришковец как бы говорит нам «А давайте разберемся»

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

$('ul').on('click', 'li', function(){ // обработчик ....

не совсем приемлем в декларативном AngularJS. Собственно, последовал совет использовать свою директиву, решающую проблему делегирования. На самом деле, на ум мне ничего толкового не пришло, и я решил погуглить, наткнулся на такой вариант: создаем директиву, которую необходимо установить на родительский для группы нужных нам элементов узел, который регистрирует слушателя.
Вот демо.
А вот 2 интересующие нас части кода:
html
<ul bn-delegate="li a | selectFriend( friend )">
 
        <li ng-repeat="friend in friends">
 
            <!-- Delegate target. -->
            <a href="#">{{ friend.name }}</a>
            <!-- Delegate target. -->
 
        </li>
 
    </ul>


//js
                    element.on(
                        "click.bnDelegate",
                        selector,
                        function( event ) {
 
                            // Prevent the default behavior - this is
                            // not a "real" link.
                            event.preventDefault();
 
                            // Find the scope most local to the target
                            // of the click event.
                            var localScope = $( event.target ).scope();
 
                            // Invoke the expression in the local scope
                            // context to make sure we adhere to the
                            // proper scope chain prototypal inheritance.
                            localScope.$apply(
                                function() {
 
                                    expressionHandler( localScope );
 
                                }
                            );
 
                        }
                    );


Но подождите. В зависимостях получается jQuery (можно обойтись без него, но тем не менее), но это пол беды. В дебрях директивы все тот же императивный подход. Собственно, в этот момент я решил опубликовать пост, с попыткой разобраться в подходах к делегированию в Angular, в комментарии призываются все, кому есть что сказать по этому поводу.
Читать дальше →

Введение в D3

Время на прочтение6 мин
Охват и читатели142K

D3.js (или просто D3) это JavaScript-библиотека для обработки и визуализации данных. Она предоставляет удобные утилиты для обработки и загрузки массивов данных и создания DOM-элементов. Эта заметка описывает работу с основными методами библиотеки, она подойдёт для изучения основ библиотеки и погружения в её логику и возможности.

Для понимания статьи пригодятся знания JS, HTML и CSS.

Читать дальше →

Игровой сервер за один день на Node.js + Socket.io

Время на прочтение3 мин
Охват и читатели46K
В конце рабочего дня в пятницу, обдумывая текущую задачу, в воспаленном мозгу неожиданно возникла мысль — а не попробовать ли мне написать свой игровой сервер?

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

Но по-видимому, заноза прочно засела в голове, поэтому проснувшись в субботу я принялся творить.
Читать дальше →

Готовим IndexedDB

Время на прочтение7 мин
Охват и читатели89K


На Хабре уже рассказывали про IndexedDB — стандарт хранения больших структурированных данных на клиенте. Но это было давно и API сильно изменился. Несмотря на это в поиске статья всплывает одной из первых и вводит в заблуждение многих, кто начинает пытатся работать с этой технологией. Поэтому я решил написать новую статью с информацией об актуальном API.
Читать дальше →

Организация js кода для джуниоров

Время на прочтение4 мин
Охват и читатели73K
С недавних пор я стал работать в сфере web разработки, и еще нахожусь в стадии падавана. Однако недавно я открыл для себя способ организации клиентского javascript кода, который может быть легко интегрирован в любой существующий проект и который легко освоить.

Этот подход называют «Модульный javascript», и под катом мы научимся его применять.

image
Читать дальше →

Стилизация элементов форм и попытка обойти подводные камни

Время на прочтение3 мин
Охват и читатели6.5K
Приветствую читатели, стилизованные элементы формы на сайтах сейчас прочно вошли в реалии современного дизайна и кто бы что не говорил, во многих случаях смотрятся они действительно приятно.
Многие из вас уже обзавелись плагинчиками типа chosen и прочим добром, некоторые из них весьма качественно написаны. В этой статье я не буду рассказывать про очередной плагин, а лишь хочу обратить ваше внимание на один из способов расширения возможностей плагина, возможно кому-то он поможет.
Я являюсь сторонником того, чтобы подключая плагины для стилизации форм, мы должны продолжать работать с элементами форм в нативном стиле и никак не зависеть от плагина стилизации. Я практически ни у одного (можно сказать ни у одного) плагина не видел корректную обработку изменения поведения элементов при изменении атрибутов DOM элементов, а именно — обработку изменения атрибута disabled (min, max, maxlength), всегда надо было учитывать апи плагины, верстку элемента и тд, а это неудобно если вы в будущем захотите поменять плагин или верстку. Как вариант — подумать заранее и для всего сделать обертки и работать с ними как с внутренним апи. Но есть и альтернативный путь.
Читать дальше →

Intl к нам приходит!

Время на прочтение4 мин
Охват и читатели32K
datemap Нет, не Intel. Intl — JavaScript объект, содержащий в себе функции форматирования чисел, дат и сравнения строк. Приходит, потому что 29 апреля Firefox, последний из популярных браузеров, не поддерживающий Intl, обновляется до 29 версии, в которой поддержка интернационализации будет включена.

Разумеется, тем кому приходится волею судеб поддерживать старые браузеры, опять не повезло. Но прогресс не стоит на месте и, начиная с конца апреля, счастливчикам можно будет потихоньку внедрять Intl в свои проекты.

Что же даёт Intl JS программисту?


А очень много

Использование директив ngShow и ngHide в AngularJS

Время на прочтение3 мин
Охват и читатели53K
Сегодня мы посмотрим на то, как можно использовать директивы ngShow и ngHide в Angularjs.

Зачем они нужны


ngShow и ngHide позволяют отображать или скрывать различные элементы. Это помогает при создании Angular-приложений, так как наши SPA, скорее всего, будут иметь много частей, которые, в зависимости от состояния нашего приложения необходимо скрывать или показывать.

Большим преимуществом этих директив является то, что нам нет необходимости скрывать или показывать элементы при помощи CSS или JavaScript. Это все обрабатывает старый добрый Angular.

Использование


Чтобы использовать ngShow или ngHide, нужно просто добавить директиву к элементу, который вы хотите показать или скрыть.
Читать дальше →

Отладка асинхронного JavaScript с помощью Chrome DevTools

Время на прочтение6 мин
Охват и читатели37K

Вступление


Возможность асинхронной работы с помощью callback-функций(далее просто возвращаемых функций) — отличительная особенность JavaScript. Использование асинхронных возвращаемых функций позволяет вам писать событийно-ориентированный код, но так же добавляет кучу проблем, ведь код перестает выполняться в линейной последовательности.

К счастью, теперь в Chrome Canary DevTools вы можете отслеживать весь стек вызовов асинхронных функций в JavaScript!
Под катом 10Mb трафика

Расширение и компоновка директив

Время на прочтение4 мин
Охват и читатели18K
Про директивы много написано, но мало о том как писать их правильно. Поделюсь опытом.

Хорошо написанная директива должна
  • решать одну задачу
  • легко расширяться
  • не конфликтовать с другими директивами


Разберем каждый пункт на примере поля для ввода пароля (думаю, всем знакомо поле с глазиком)

image

<input ng-model="user.password"
       ng-minlength="6"
       form-password
       form-error="Не менее 6 символов">


Сколько директив используется?
Читать дальше →

Ближайшие события

Несколько интересностей и полезностей для веб-разработчика #15

Время на прочтение3 мин
Охват и читатели25K
Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Bitcore


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

Валидация биткоин адреса:
var bitcore = require('bitcore');
var Address = bitcore.Address;

var addr = new Address("1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa");

console.log(addr.isValid());


Мониторинг блоков и транзакций
var bitcore = require('bitcore');
var networks = bitcore.networks;
var Peer = bitcore.Peer;
var PeerManager = require('soop').load('bitcore/PeerManager', {
  network: networks.testnet
});

var handleBlock = function(info) {
  console.log('** Block Received **');
  console.log(info.message);
};

var handleTx = function(info) {
  var tx = info.message.tx.getStandardizedObject();

  console.log('** TX Received **');
  console.log(tx);
};

var handleInv = function(info) {
  console.log('** Inv **');
  console.log(info.message);

  var invs = info.message.invs;
  info.conn.sendGetData(invs);
};

var peerman = new PeerManager();

peerman.addPeer(new Peer('127.0.0.1', 18333));

peerman.on('connection', function(conn) {
  conn.on('inv', handleInv);
  conn.on('block', handleBlock);
  conn.on('tx', handleTx);
});

peerman.start();



Читать дальше →

WinJS — opensource от Microsoft

Время на прочтение2 мин
Охват и читатели22K
Два дня назад Microsoft представил JavaScript'овую UI-ориентированную библиотеку для кроссплатформеной разработки — WinJS, который, хоть и существует достаточно давно, но как отдельный «сет» вне привязки к Windows, был представлен только 02.04.2014.

http://dailyjs.com/2014/04/03/winjs/
http://blogs.windows.com/windows/b/buildingapps/archive/2014/04/02/extending-platform-commonality-through-universal-windows-apps.aspx
https://github.com/winjs/winjs

И вот что интересно…
Читать дальше →

Простой индикатор загрузки картинки на Jquery

Время на прочтение2 мин
Охват и читатели36K
Коль скоро быстрый интернет пока еще доступен не везде, не на всех устройствах, пришла мысль что неплохо бы облагородить процесс загрузки картинок. Задача эта не слишком функциональна, однако дизайн-фрики, полагаю, не раз задавали себе вопрос, как просто реализовать индикацию подгрузки картинки.

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

Читать дальше →

Бренден Айк ушёл с поста руководителя Mozilla под давлением ЛГБТ

Время на прочтение1 мин
Охват и читатели85K
Бренден Айк был вынужден покинуть пост руководителя (CEO) компании Mozilla. Решение принято в свете травли, устроенной представителями сексуальных меньшинств, недовольных тем, что Бренден Айк был приверженцем традиционных взглядов на семейные отношения. Травля дошла до того, что некоторые подконтрольные ЛГБТ сайты, в том числе один из крупнейших сайтов знакомств (OKCupid), стали блокировать доступ пользователей Firefox, предлагая сменить браузер, так как Бренден Айк шесть лет назад пожертвовал тысячу долларов на продвижение поправки в конституцию штата Калифорнии, определяющей брак только как союз между мужчиной и женщиной.
Заметка короткая, под кат немного не поместилась

Тысяча и одна gif

Время на прочтение5 мин
Охват и читатели20K
Всем привет!
Хотелось бы рассказать вам историю создания одного простенького развлекательного сервиса по записи gif’ок с веб-камеры при помощи HTML5 и JS. О том как решение на коленке на базе опенсорсных решений в одночасье произвело пусть хоть и маленький, но всплеск популярности волны от которого уже на протяжении полугода приносят небольшое количество посетителей которым полезен этот сервис.

А началось все просто

В конце лета обычным рабочим днем бороздя просторы GitHub я наткнулся на довольно интересный скрипт (facetogif) на нативном JS и HTML5 позволяющий записывать ролики с веб-камеры в gif-анимацию. Была приложена даже рабочая демка заливающая готовые ролики на сервис imgur или позволяющая сохранить их сразу на жестком диске.
Эта идея показалась мне очень интересной и я решил с небольшими переделками реализовать ее в виде самостоятельного сервиса.
Сказано — сделано. В тот же вечер я форкнул репозиторий, зарегистрировал домен «вгиф.рф», поднял VPS (самый дешевый тариф за 5$) на DigitalOcean и написал простейший скрипт на php складирующий ролики прямо там на сервере.
Для экономии ресурсов на сервер установил только Nginx и PHP-FPM.
И тут завертелось

Не заставляйте (не)равенства в JavaScript выглядеть хуже, чем они есть

Время на прочтение3 мин
Охват и читатели27K
Время от времени я встречаю публикации, где рассказывается о том, какие из значений оператора == эквивалентны (как, например, здесь). Часто при этом оговаривается, что приведённые в таблице данные не очень хорошо организованы.

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



Кошмар, товарищи!.. Как по мне, так здесь бóльший беспорядок в очерёдности строк/столбцов.
Читать дальше →

Node.js, Require и Exports

Время на прочтение2 мин
Охват и читатели241K
Когда я только-только начал играться с Node.js, для меня существовала лишь одна вещь, которая доставляла мне дискомфорт. Занятно, но я говорю сейчас о module.exports. Говоря занятно, я намекаю на то, что это, всё-таки, одна из фундаментальных частей Node.js и она достаточно проста. Сейчас же, оглядываясь назад, я не могу объяснить почему меня это так стопорило… Просто помню, что этот момент был для меня не очевиден. Ну и, полагаю, что я один из тех многих, кто встретив его разок-другой, сначала только путался, прежде чем написал что-либо применив его.

В Node, все штуки видны друг другу только в рамках одного и того же файла. Под штуками я подразумеваю переменные, функции, классы и их члены. Например у нас есть файл misc.js следующего содержания:

var x = 5;
var addX = function(value) {
  return value + x;
};

Привычный доступ к переменной x и функции addX из другого файла невозможен. Это никак не связано с использованием var. Дело в том, что Node состоит из блоков называемых модулями, и каждый отдельный файл по своей сути — отдельный блок, чья область видимости изолирована от других таких же блоков.
Читать дальше →