Обновить
256K+

JavaScript *

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

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

OAuth.io

Время на прочтение1 мин
Охват и читатели17K
Доброго времени суток и с прошедшим Днем народного единства! Хочу рассказать об одном хорошем проекте — .


OAuth.io — это API (JavaScript, PhoneGap, iOS, Android, Flex) и сервис, который значительно упрощает взаимодействие более чем с 80-ю oAuth провайдерами (Facebook, Twitter, VK, GitHub, Dropbox, и др). Сервис работает по модели freemium: до 5000 соединений в месяц сервис бесплатный, при большем количестве вас ждут вполне демократичные цены. Стоит также сказать, что проект полностью открытый и вы сможете сами запустить у себя серверную часть «OAuth IO Daemon» (GitHub).

Как это работает на примере JavaScript

Открываем файлы формата Open XML Excel в JavaScript

Время на прочтение4 мин
Охват и читатели23K
Для загрузки информации о торговых точках в наш логистический SaaS-сервис «Муравьиная логистика» из Excel я решил использовать web-браузер. Обычно проще загрузить файл на сервер и с помощью любой библиотеки залить в БД. Но мне было интересно загрузить его построчно для контроля целостности каждой строки на клиенте, ну и, конечно, опробовать так всеми рекламируемое HTML5 FileAPI и Drag and Drop.
Читать дальше →

Harmony collections NOW

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

На хабре уже проскакивала статья про такие замечательные вещи, как Map, WeakMap и Set, но в действительности реальные возможности этих API не были раскрыты (если я все-таки хорошо воспользовался поиском).
Эти API толком не реализованы нигде, кроме firefox (можно включить в chrome canary), но даже там до недавних пор не поддерживалось использование HTMLElement-подобных объектов в качестве ключей. Polymer, например, убрал только три недели назад

	if (navigator.userAgent.indexOf('Firefox/') > -1)


Чем же они так хороши? По сути Map/WeakMap можно воспринимать как обычные хэш-объекты, только в качестве ключей можно использовать только сложные объекты (Object, Function, Array), так как привязка идет не по содержимому, а по адресу в памяти.
Таким образом появляется возможность привязаться на фронтэнде к
  • dom-элементу
  • XHR-запросу
  • File-элементу


Это дает нам возможность работать без id-шников элементов, делать дата-биндинг в разы быстрее, создать безумную альтернативную реализацию promises и так далее.
Мы будем говорить о WeakMap. Даже не так, мы будем говорить о существующих полифиллах для WeakMap.

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

Оптимизация производительности длинных списков в AngularJS

Время на прочтение7 мин
Охват и читатели20K
AnglarJS это здорово! Но при работе с большими списками, содержащими сложной структуры данных, он может начать работать очень медленно! Мы столкнулись с этой проблемой при переносе нашей административной панели на AngularJS. Она должна была работать без задержек при отображении около 500 строк. Но на первое отображение уходило до 7 секунд. Ужасно!
Мы обнаружили два узких места в нашей реализации. Одно было связано с директивой ng-repeat, а другое с применением фильтров.
Эта статья рассказывает о результатах наших опытов с различными подходами по решению, или смягчению, возникшей проблемы с производительностью. Это даст вам идеи и советы, куда вы можете приложить свои силы, а какие подходы все-таки не стоит использовать.
Читать дальше →

Разработка директив angularjs — это просто

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

AngularJS директивы – это клево


AngularJS является каркасом (фреймворком) для построения web приложений, который позволяет создавать сложные приложения достаточно просто. Одна из его лучших возможностей, это создание директив, которые являются повторно используемыми web компонентами. Это дает возможность создавать новые HTML теги и атрибуты, которые могут динамично отображать контент в ответ на изменение данных, и обновлять сами данные, в случае необходимости.
Это очень высокопроизводительный подход, поскольку он позволяет вам оборачивать сложное взаимодействие с DOM в повторно используемые пакеты кода.
Читать дальше →

Визуализируем в 3D, или как подружить D3 и Three.js

Время на прочтение5 мин
Охват и читатели17K
Если Вы уже слышали о D3 и Three.js, эта статья может показаться Вам интересной. В ней речь пойдёт о том, как заставить эти библиотеки работать вместе для создания динамических трёхмерных сцен, на примере этой простой гистограммы:



Да, мне интересно

Разработка клиент-серверной инфраструктуры на javascript (часть 2 — сервер и размещение)

Время на прочтение7 мин
Охват и читатели39K
imageЗдравствуйте, в этой статье я расскажу о серверной части и опишу процесс размещения приложения на облачном хостинге openshift.
Читать дальше →

Пишем instagram-робота, ставим лайки по тегам

Время на прочтение6 мин
Охват и читатели59K
Иногда, для разминки ради, ставлю себе задачи. Просто ради интереса. Чаще всего они забываются сразу после найденного решения и более не используются. Так произошло и в этот раз. Начитался в интернетах о том, что эффективным способ продвижения в Instagram, считается поиск фото по тегам и «лайканье» оных. Если правильно выбрать теги (как правило те, что соответствуют тематике вашего аккаунта), вы получите не только ответные лайки, но и новых подписчиков (что подтвердилось).

Задача


Написать робота (MySQl+php+js), который находил бы фото по тегам и ставил им лайки. Более того, желательно, чтобы наш робот не попал в бан.
Читать дальше →

Несколько интересностей и полезностей для веб-разработчика (выпуск 7)

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

Browserhacks



Название говорит самое за себя. Данный ресурс — хранилище всевозможных хаков к существующим браузерам. Увидев этот сайт, сам Paul Irish мудро произнес: "Holy shit amazing".

5 замечательных изобретений от David DeSandro (Twitter, H5BP)


Masonry — в переводе «каменная кладка» — идеальное решение для создания Grid Layout. Качественная «замена» для неутвержденной Flexbox спецификации. Простой синтаксис дает возможность без труда создавать Pinterest/Surfingbird подобные макеты. Существует на нативном JavaSciprt и как jQuery плагин.

Isotope — «изысканный jQuery плагин для магических лэйаутов. Позволяет с легкостью фильтровать, сортировать и придавать динамичность макету».

imagesLoaded.js — определяет когда изображения были загружены. Включает в себя 4 события: always, done, fail, progress. Простой в использовании.

Draggabilly — аналог jQuery UI Draggable на нативном JavaScript в лучших традициях автора кода. Работает с touch интерфейсом.
Close Pixelate — «пикселизация» изображений в Canvas аля потаённые места в некоторых работах жанра НЮ.

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

Техническая конференция FOSS Sea: back-end на базе свободных и открытых технологий

Время на прочтение2 мин
Охват и читатели1.7K
30 ноября в Одессе состоится VI специализированная техническая конференции FOSS Sea. С этого года конференция становится тематической и первая тема, которая будет поднята в её рамках – back-end на базе свободных и открытых технологий.

Конференция будет проходить в два параллельных потока:
  • «Облака» – на этом потоке участники обсудят технические вопросы настройки, администрирования и поддержки облачных инфраструктур;
  • «JavaScript на бекенде» — здесь речь пойдет об использовании различных решений, таких как: node.js, express.js, jscala и других.

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

Warp9 — еще одна реактивная js библиотека. На этот раз компонуемая и без утечек

Время на прочтение12 мин
Охват и читатели19K
Статья устарела, актуальную информацию ищите на сайте Warp9'а



Существует множество реактивных и около-реактивных библиотек для создания графического интерфейса на js: Angular, Knockout, React, RxJS… Спрашивается, зачем писать еще одну. Оказывается, во всех них, помимо фатального недостатка, есть еще несколько.

Под катом анализ существующих библиотек и краткое описание warp9.

Разработка клиент-серверной инфраструктуры на javascript (часть 1 — клиент)

Время на прочтение5 мин
Охват и читатели81K
image

О чем эта статья. Я хочу поделиться опытом разработки мобильного приложения на phonegap. В итоге получился целый програмный комплекс с RESTfull сервером, клиентами, да еще хостится на PaaS. Поэтому я опишу отдельно архитектуру клиентского приложения (html5 single page app, завернутое в phonegap), серверного (nodejs с swagger-node-express + node-orm2), и как разместить все это на openshift PaaS.
Читать дальше →

(Архив) Matreshka.js — MK.Array

Время на прочтение6 мин
Охват и читатели4.4K
Статья устарела. В новой документации содержится самая актуальная информация из этого поста. См. Matreshka.Array.



(Напомню, репозиторий находится здесь)

Приветствую всех. Предыдущую статью я закончил на том, что нам может потребоваться массив данных. Массивом в проекте Matreshka.js являются экземпляры класса MK.Array. Чем они отличается от обычных массивов? Почти ничем. Прототип MK.Array содержит все методы, которые есть у «традиционного» массива, конструктор принимает те же аргументы, что и оригинальный Array, а экземпляры имеют несколько интересных особенностей.

MK.Array — это массив на стероидах, который умеет:
  • Всё, что умеет Array
  • Генерировать события при модификации
  • Использовать цепочечный вызов методов там, где это возможно
  • Умеет то, что умеет Матрешка: привязывать элементы к свойствам и генерировать кастомные события


Помните гифку из первой статьи серии?

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

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

(Архив) Matreshka.js — MK.Object

Время на прочтение4 мин
Охват и читатели4.1K
Статья устарела. В новой документации содержится самая актуальная информация из этого поста. См. Matreshka.Object.


В предыдущих статьях мы познакомились с общими принципами Матрешки: привязка элементов, события, наследование. В конце предыдущей статьи я задал себе вопрос: «Как разграничить состояние приложения (показать ли пользователю пароль) и данные приложения (логин, пароль, «запомнить меня»)».

Класс, который нам в этом поможет, называется MK.Object, который наследуется от класса Matreshka. Идея проста: у нас есть множество ключей, отвечающих за данные в экземпляре класса и мы считаем, что остальные свойства отвечают лишь за состояние приложения и не являются бизнес моделью.

Как устроено множество ключей
За множество ключей отвечает псевдоприватное свойство ._keys, которое является объектом со значениями, которые нам безразличны. Массив бы нам не подошел, потому что, перед добавлением нового ключа надо было бы проверять, есть ли ключ в массиве, а при удалении, пришлось бы узнавать индекс, затем сдвигать следующие элементы. В случае объекта, мы получаем полноценное множество строк, для добавления нового ключа не нужно проверять его наличие, а для удаления требуется лишь вызов оператора delete.


Для того, чтоб установить свойство, которое отвечает за данные, используется метод .jset:
var mkObject = new MK.Object();
mkObject.jset( 'a', 1 );
console.log( mkObject.toJSON() ); // { a: 1 }

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

Кэш для фильтров AngularJS с помощью Lo-Dash

Время на прочтение4 мин
Охват и читатели7.3K
AngularJS как быстрый тигр ^.^

Пишу диплом где решаю одну из задач — реализация анонимного быстрого веб чата. Быстрого во всех смыслах — загрузка, работа приложения, использование (прочь авторизацию). Выбор остановил на связке: Node.js фреймворк SocketStream и AngularJS на стороне клиента. В процессе работы столкнулся с проблемой — повторные расчёты производимые фильтрами на одной и той же модели. Детали проблемы и решение под катом.
Читать дальше →

Как обойти PopUp blocker в браузере в асинхронных запросах

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

Проблема


Браузеры по политике безопасности разрешают открывать всплывающее окно, только, если пользователь непосредственно предпринял для этого какие-то действия. Например, этот код будет работать:

$("someElement").on("click", function(){
    window.open("http://yandex.ru")
}

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

Где jQuery хранит обработчики событий

Время на прочтение1 мин
Охват и читатели22K
В «интернетах» я не нашел подробного ответа на этот вопрос. Как правило, рекомендуется использовать стандартный метод для получения обработчиков:
$(elem).data('events')

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

(Архив) Matreshka.js — Наследование

Время на прочтение8 мин
Охват и читатели4.7K
Статья устарела. В новой документации содержится самая актуальная информация из этого поста. См. Class.


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

Матрешка устроенна в виде класса, сконструтированного при помощи кастомной функции Class. Это немного измененная версия функции, о которой я писал на форуме javascript.ru (ссылка на доку).

Так почему классы? Класс — это лишь слово, не противоречащее парадигме прототипного программирования. Если взглянуть на документацию того же Backbone.js, то вы увидите, что и они оперируют словом «класс» без всяких стеснений. Мы можем поспорить о том, что в Javascript нет классов, есть конструкторы, и я с вами соглашусь, но, на деле, имеет ли этот спор смысл? Если конструктор выглядит как класс, плавает как класс, и крякает как класс, то это, наверное, и есть класс?

От лирики к делу. Итак, Матрешка создана в виде класса:
window.MK = window.Matreshka = Class({ ... });

Аргумент класса — прототип конструктора, который можно определить так:
var MyClass = Class({
  constructor: function() { ... }
});
… который затем и возвращается из функции Class. Если конструктор не определен, то им станет пустая функция.
Читать дальше →

Прекратите использовать location.hash, да здравствует HTML5 History API!

Время на прочтение2 мин
Охват и читатели79K
Много лет location.hash был способом в AJAX-приложении заставить работать кнопки «Назад» / «Вперёд» и, например, добавить определенное состояние страницы в избранное и вернуться к нему позже.

Сейчас, когда HTML5 считается нормой, пора обратить свое внимание на History API и забыть про location.hash. HTML5 History API проще для понимания и позволяет сделать URL чуточку красивее (без кракозябры # или #! если вы имеете дело с индексированием ajax приложения).
Читать дальше →

Bind, Call и Apply в JavaScript

Время на прочтение3 мин
Охват и читатели122K
От переводчика:
Прошу принять во внимание, что приведенный здесь код, возможно, не является хорошими практиками. Тем не менее разбор сниппета из этого поста может оказаться еще одним поводом окунуться в функциональный JavaScript.


Недавно я увидел изящный JS сниппет в этом твите.
var bind = Function.prototype.call.bind(Function.prototype.bind); // #fp

Взглянув на него, я смог догадаться, что он делает. Он превращает x.y(z) в y(x, z). Радуясь как ребенок, я показал его своим коллегам. Они спросили меня, что же тут происходит. Я открыл рот, чтобы объяснить и… не смог сказать ни слова. Я развернулся и ушел.
Читать дальше →