Обновить
256K+

JavaScript *

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

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

Vow: самые быстрые промисы

Время на прочтение1 мин
Охват и читатели13K
Хочу предоставить вашему вниманию библиотеку Vow, которую написал мой коллега Дмитрий Филатов dfilatov.

Библиотека реализует Promises/A+, работает очень быстро и требует малого объема памяти. По тестам производительности сильно опережает Q, но при этом сохраняет асинхронную манеру работы.

Работа с Vow выглядит так же просто, как работа с Q. Из недостатков (по сравнению с Q) можно лишь выделить отсутствие progress.

Пример кода с использованием Vow:
function readFile(filename, encoding) {
    var promise = Vow.promise();
    fs.readFile(filename, encoding, function(err, data) {
        if (err) return promise.reject(err);
        promise.fulfill(data);
    });
    return promise;
}
Vow.all([readFile('test1.txt', 'utf8'), readFile('test2.txt', 'utf8')]).then(function(results) {
    console.log(results.join('\n'));
});

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

Новый этап в гонке скоростей JavaScript. Модуль OdinMonkey ускоряет низкоуровневый код в 10 раз

Время на прочтение2 мин
Охват и читатели37K
Модуль OdinMonkey — часть движка IonMonkey, отвечающая за оптимизацию и компиляцию низкоуровневого Asm.js — 21 марта был включён в состав сборки Firefox Nightly. Что такое Asm.js? — это подмножество языка JavaScript, позволяющее программировать «на уровне ассемблера» — без динамической типизации и выделения памяти. В каком-то смысле Asm.js аналогичен технологии Google Native Client, только с обратной совместимостью — код, написанный по спецификации Asm.js, является корректным кодом JavaScript и будет выполняться на любом движке, только медленнее, чем при наличии OdinMonkey.

Asm.js позволяет в ряде случаев вплотную приблизиться к производительности нативного кода — программа на Си, скомпилированная в Asm.js, обычно работает всего вдвое медленнее оригинала:


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

Canvas в GIF на Javascript

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

Расскажу об особенностях с которыми я столкнулся при сохранении изображения из canvas в GIF.
Тут будут рассмотрены готовые решения и мой собственный javascript код квантизации изображения (то есть уменьшение палитры до 256 цветов). Так же будут затронуты вопросы быстродействия некоторых javascript конструкций.
Читать дальше →

Взлом тега в 100 символов

Время на прочтение3 мин
Охват и читатели24K
Не так давно я обнаружил, что JavaScript позволяет изменить атрибут href тега <a> после того, как вы щелкнете по нему. На первый взгляд это выглядит несерьезно, но не сомневайтесь — таким способом злоумышленник сможет получить данные пользователя.

Позвольте вам продемонстрировать: (Прим. пер.: Пример вы можете увидеть в оригинале статьи. Ссылка изначально ведет на PayPal, но после нажатия происходит редирект на другую страницу блога автора. )

Как вы убедились, вы не перешли на PayPal (кроме Opera, где, по-видимому, это поведение исправлено). Так произошло потому, что после нажатия на ссылку был запущен код, который изменил атрибут href ссылки, и что удивительно — браузер отправляет по-новому адресу. Но так не должно происходить. Посетители сайта (пожалуй, самые технически подкованные их них) по ссылке будут предполагать куда они переходят, в данном случае, на сайт PayPal. В прошлом году PayPal в течение нескольких месяцев производил редирект с главной страницы (UK) на paypal-business.co.uk. По моему мнению, пользователи уже привыкли к таким перенаправлениям, что уже само по себе является уязвимостью и представляет реальную угрозу, как я её называю «Фишинг 2.0».
Взглянем на код

Эмуляция хвостовой рекурсии в JavaScript

Время на прочтение6 мин
Охват и читатели28K
Если кто-то ещё не знает, что такое хвостовая рекурсия, вот простой пример метода, складывающего в лоб натуральные числа от 1 до n (n≥0):
function add(n,acc) {
  if(n===0) return acc;
  return add(n-1,acc+n);
}

Изначально функция вызывается с параметром acc=0. В случае, если n не равно нулю, метод вызывает сам себя с другими параметрами и возвращает результат. Компилятор (или интерпретатор, или виртуальная машина) могут понять, что текущий вызов функции в стеке уже не нужен, стереть его и заменить следующим вызовом. Таким образом, рекурсия не приводит к разрастанию стека. Строго говоря, хвостовой вызов не обязан обращаться к текущей функции: вызов любой другой тоже может быть хвостовым. Главное условие: вызов функции и возврат её результата должны быть последними действиями в текущей функции. К примеру, в такой реализации метода хвостовой рекурсии нет, так как после вызова происходит ещё сложение:
function add(n) {
  if(n===0) return 0;
  return n+add(n-1);
}

По ряду причин хвостовая рекурсия в JavaScript не поддерживается (обсуждение на эту тему есть на StackOverflow). Поэтому вызов вроде add(100000,0) завершится исключением. На Хабре предпринимались попытки решить эту проблему через setTimeout, но это выглядит не очень честно и не очень красиво. Более изящное решение для языка Python было предложено с использованием «трамплина». Похожий подход для JavaScript рассмотрен здесь. Но мне захотелось, чтобы работало быстро и чтобы функцию можно было записать прямо как в примере выше. Посмотрим, что можно сделать.
Читать дальше →

intro.js — пошаговое руководство для веб-страницы

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


Эта маленькая библиотека позволяет очень просто создать пошаговое введение для сайта или приложения. Достаточно добавить атрибуты data-intro и data-step с описанием и номером шага соответственно к нужным элементам страницы. Вот так:

<a href='http://google.com/' data-intro='Hello step one!' data-step='1'></a>
Читать дальше →

Универсальный код C# под .NET и JavaScript

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

Введение


Приветствую вас, хабравчане. В данном топике я хотел бы осветить подробности разработки на C# под разнородные целевые платформы, в первую очередь такие как .NET и браузер (JavaScript). В качестве примера желающие могут изучить веб-сервис по обработке фотографий gfranq.com, в котором реализована клиентская и серверная обработка фотографий с помощью фильтров, а также функциональность коллажей на основе материала, описанного в данной статье.

Так как я не умею подбирать картинки для привлечения внимания, то она будет по теме:


Технические подробности под катом

AngularJS для привыкших к jQuery

Время на прочтение4 мин
Охват и читатели165K
AngularJS — прекрасный фреймворк для построения веб-приложений. У него замечательная документация, снабженная примерами. В обучающих «пробных» приложениях (вроде TodoMVC Project) он очень достойно показывает себя среди остальных прочих фреймворков. По нему есть отличные презентации и скринкасты.

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

Редактор цветовых схем для SublimeText 2

Время на прочтение1 мин
Охват и читатели18K
В середине октября 2012 года Allen Bargi (aziz) обратил своё внимание на Angular.js и работу новых HTML5 API-интерфейсов для работы с файлами в Chrome. Эксперимент затянулся и разросся в замечательный проект — TMTheme Editor. Являясь on-line приложением, редактор TMTheme позволяет создавать и редактировать визуальные темы для популярного нынче SublimeText, так же поддерживается совместимый по темам Textmate и другие редакторы.

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

Вертикальная черта, затем ноль

Время на прочтение3 мин
Охват и читатели41K
Заголовок, выраженный словами, понадобился только для поисковой находимости. Но речь пойдёт о роли символьной конструкции «|0» в JavaScript.

Впервые на неё я обратил внимание, когда переводил FAQ про asm.js и читал спецификации этого подмножества языка JavaScript. Там «|0» служит, например, для указания типа значения, возвращаемого из функции: увидели «|0» после значения — значит, перед нами знаковое целое.

Вдругорядь я заметил конструкцию «|0» в примере кода на Гитхабе, где происходило преобразование к целому числу результата деления на 1024².

Тогда глаза мои открылись, и я увидел прекрасные возможности:

( 3|0 ) === 3;       // целые числа не изменяет
( 3.3|0 ) === 3;     // у дробных чисел отбрасывает дробную часть
( 3.8|0 ) === 3;     // не округляет, а именно отбрасывает дробную часть
( -3.3|0 ) === -3;   // в том числе и у отрицательных дробных чисел
( -3.8|0 ) === -3;   // у которых Math.floor(-3.3) == Math.floor(-3.8) == -4
( "3"|0 ) === 3;     // строки с числами преобразуются к целым числам
( "3.8"|0 ) === 3;   // при этом опять же отбрасывается дробная часть
( "-3.8"|0 ) === -3; // в том числе и у отрицательных дробных чисел
( NaN|0 ) === 0;     // NaN приводится к нулю
( Infinity|0 ) === 0;     // приведение к нулю происходит и с бесконечностью,
( -Infinity|0 ) === 0;    // и с минус бесконечностью,
( null|0 ) === 0;         // и с null,
( (void 0)|0 ) === 0;     // и с undefined,
( []|0 ) === 0;           // и с пустым массивом,
( [3]|0 ) === 3;          // но массив с одним числом приводится к числу,
( [-3.8]|0 ) === -3;      // в том числе с отбрасыванием дробной части,
( [" -3.8 "]|0 ) === -3;  // и в том числе с извлечением чисел из строк,
( [-3.8, 22]|0 ) === 0    // но массив с несколькими числами вновь зануляется
( {}|0 ) === 0;                // к нулю также приводится пустой объект
( {'2':'3'}|0 ) === 0;         // или не пустой
( (function(){})|0 ) === 0;    // к нулю также приводится пустая функция
( (function(){ return 3;})|0 ) === 0;    // или не пустая

Итак, во-первых, перед нами удобное средство отбрасывания дробной части.

  • По отношению к отрицательным числам оно полезно тем, что дробное число превращается не в ближайшее меньшее целое число (возрастая по модулю), как это случилось бы после «Math.floor()», а в ближайшее меньшее по модулю целое число (возрастая по значению). Нередко именно это и требуется.
     
  • По отношению к положительным числам оно полезно уж тем одним, что конструкция «|0» более чем на порядок короче по сравнению с «Math.floor()». Поэтому она может и должна вызывать у разработчиков привыкание не меньшее, чем та принятая в jQuery запись «$()», о которой я говорил четыре дня назад, что с неё никто добровольно не перейдёт обратно на «document.getElementsByClassName()», например.

Во-вторых, перед нами удобное средство преобразования различных типов к целым числам.

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

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

Время на прочтение6 мин
Охват и читатели41K
Добрый день! В этой статье я расскажу про такой компонент из QML как Loader.

Он позволяет создать контейнер, в который затем можно вложить необходимый qml-элемент, использовать разные элементы в зависимости от состояния программы, а также сделать редко используемые части загружаемыми по требованию и сэкономить ресурсы. Loader является контейнером для QML-компонента и сам по себе не отображается.

Я рассматриваю компонент из QtQuick 2.0 которая входит в Qt пятой версии. В более ранней версии этот компонент также есть, но функционал немного меньше.

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

Pilot: многофункциональный JavaScript роутер

Время на прочтение9 мин
Охват и читатели37K
С каждым днем сайты становятся все сложнее и динамичнее. Уже недостаточно просто «оживить» интерфейс — все чаще требуется создать полноценное одностраничное приложение. Ярким примером такого приложения является любая web-почта (например, Mail.Ru), где переходы по ссылкам приводят не к перезагрузке страницы, а только к смене представления. А это значит, что задача получения данных и их отображения в зависимости от маршрута, которая всегда была прерогативой сервера, ложится на клиент. Обычно эту проблему решают с помощью простенького роутера, на основе регулярных выражений, и дальше не развивают, в то время как на back-end этой теме уделяют гораздо больше внимания. В этой статье я постараюсь восполнить этот пробел.

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

Карты в браузере без сети: open source наносит ответный удар

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

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

Отладка Node.js в Visual Studio

Время на прочтение4 мин
Охват и читатели25K
Мне нравится Node.js, но совсем недавно я начал использовать её на серьёзных проектах. При этом я продолжил пользоваться моей любимой средой разработки*. И если для простых скриптов достаточно просто редактора, то для серьёзной разработки нужны серьёзные инструменты, в частности, дебаггер. Ничего готового для студии найти не удалось, поэтому я взял и за пару выходных сделал его сам:
image
Читать дальше →

Вышел WebStorm 6 с поддержкой новейших технологий веб-разработки

Время на прочтение3 мин
Охват и читатели25K
Команда разработчиков WebStorm постаралась в очередном выпуске IDE собрать самые востребованные возможности для самых свежих технологий. Что появилось нового?

Поддержка TypeScript, CoffeeScript, Dart, LESS и Sass


В новой версии Webstorm появилась базовая поддержка TypeScript: подсветка кода, проверка соответствия типов, навигация по коду, обнаружение ошибок по ходу редактирования и автодополнение. Поддержка TypeScript, CoffeeScript и Dart включает компиляцию в Javascript на всех платформах, поддерживаемых в WebStorm. Аналогично поддерживаются LESS и Sass.

В основном релизе IDE теперь есть полноценная отладка CoffeeScript, TypeScript и Dart с использованием source maps. Нам особенно приятно порадовать коллегу pietrovich, который поднимал этот вопрос в ветке обсуждения в одном из прошлых постов.
А что еще?

Произвольный вид поля file в html-форме, одинаковый во всех браузерах

Время на прочтение2 мин
Охват и читатели79K
Не смотря на развитие, внедрение новых стандартов и плюшек в браузерах, у нет единых стандартов, как отображать элемент /> по умолчанию. Более того, у этого элемента нет атрибутов, позволяющих его в какой-то мере стилизовать.
Из-за необходимости привести это поле формы к единому виду во всех браузерах и «вписать» в разработанный дизайн, после поисков и анализа материалов в интернете был разработан метод замены вида поля формы на html+css, и js для расширения функциональности.

Как по умолчанию выглядит это поле?

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

Вышел CoffeeScript 1.6.1 с поддержкой Source Maps

Время на прочтение1 мин
Охват и читатели11K
Случилось то, чего мы ждали уже давно. Благодаря усилиям Jason Walton теперь CoffeeScript поддерживает Source Maps, и мы можем отлаживать код на CoffeeScript прямо в браузере (Chrome, Firefox Nightly, Webkit Nightly). Теперь практически не осталось причин не использовать этот великолепный язык в своих веб-проектах.

Отладка с данным нововведением выглядит вот так (поддерживаются breakpoints, можно смотреть переменные, стек и т.п.):

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

Webrtc, Peer Connection — создание полноценного видео чата в браузере

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

Введение


Webrtc на хабре уже неоднократно упоминался, хотелось бы рассказать немного про техническую часть реализации и осветить создание небольшого видео чата. Хочу сразу оговорится, что реализация webrtc постоянно меняется, в том числе названия функций api, их параметры.
Всем, кому просто хотелось бы посмотреть сразу как это все работает, сюда: apprtc.appspot.com демка от гугла все что нужно — это перейти по ссылке и послать её еще кому-нибудь уже с номером комнаты. В конце нужно поменять цифры если окажется что комната переполнена. Кому интересно как это все работает добро пожаловать под кат
Читать дальше →

Пишем своё расширение для браузера Mozilla Firefox

Время на прочтение5 мин
Охват и читатели64K
Итак, после обновления Firefox до 19 версии, полностью отвалилось горячо любимое расширение Яндекс.Бар. Не забуду напомнить, что Яндекс.Бар был заменен Яндекс.Элементами, которые понравились чуть больше, чем никому, поэтому и получили свои заслуженные 2 бала из 5ти.

Почему не понравились? Заменили адресную строку, стало неудобно просматривать почту, заменили закладки и убрали корректор адресной строки (под предлогом установки Punto Switcher, который может и хорош для обычного работника, но никак не для программиста. Поэтому и был удален почти сразу же, как установлен. Да и если можно было бы настроить, то всё равно желание пропало).

Немного погодя было решено создать свое подобное расширение, которое будет включать в себя такие плюшки, как просмотр почты и корректор адресной строки. Чтож, раз не ты, так кто другой?

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

Объектно-ориентированный дизайн… в CSS

Время на прочтение9 мин
Охват и читатели47K
Предупрежу заранее, что я совершенно не считаю себя экспертом HTML/CSS/JS. Но, как архитектору, мне всегда была интересна организация и систематизация кода в самых разных его проявлениях, в том числе и представленных в виде CSS. Особенно сильно этот интерес был подогрет БЭМом, при первом знакомстве с которым подсознание отреагировало когнитивным дискомфортом. А поскольку БЭМ-стиль в проектах у меня стал появляться все чаще, я почувствовал острую необходимость осмыслить, наконец, свое отношение к организации стилей. Таким образом и появился данный топик-размышление, топик-дискуссия. Я понимаю, что взялся за пограничную задачу, поскольку далеко не всем верстальщикам знакомы тонкости объектно-ориентированного дизайна, а большинство архитекторов не написали ни одного CSS-стиля. И, как результат, мне пришлось неуклюже балансировать, чтобы было понятно всем. Но 'этот риск еще больше подогрел мой интерес к теме :)
Читать дальше →