Все потоки
Поиск
Написать публикацию
Обновить
228.56

JavaScript *

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

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

Создаем удобный вьювер для vk.com при помощи Fluid.app с нотификацией о новых сообщениях в доке Mac OS X

Время на прочтение3 мин
Количество просмотров13K
Здравствуйте, хабражители!

Однажды после прочтения одной статьи, я загорелся желанием сделать подобную обертку для вконтактика с преферансом и куртизанками, тем более что с адекватными приложениями под Мак от команды Дурова дела обстоят весьма туго, а при таком подходе можно получить почти полноценное десктоп-приложение.



А что из этого получилось — под катом.
Читать дальше →

Новый этап в гонке скоростей 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 мин
Количество просмотров24K

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

JSonCmp — сравниваем в JavaScript правильно

Время на прочтение2 мин
Количество просмотров11K
Вот JavaScript-овый объект, сериализованный в JSon:

var source1 = '[{"vConfig":{"vType":"objectview","serverItemType":"TrackerObject"}}]';


А вот ещё один JavaScript-овый объект, тоже сериализованный в JSon:

var source2 = '[{"vConfig":{"serverItemType":"TrackerObject","vType":"objectview"}}]';


У них одинаковая структура, одинаковые параметры, одинаковые значения в этих параметрах. По всем признакам, и в source1, и в source2 у нас одно и то же.

Но интерпретатор JavaScript с нами, разумеется, не согласен. И он вполне резонно считает, что source1 и source2 — разные строки. А если мы десериализуем их обратно, то получим два object-а, которые расположены по различным адресам памяти и… тоже не равны друг другу.

А если вы, впридачу, работает с Ext.js, щедро генерируете свои классы и не забываете про jSon, то может дойти до полного затмения. Как сравнить эти огромные простыни сведений о контролах, которые собираются в JSon-ы? Или разобраться древовидными объектами, где в каждое поле уже успели насоздаваться ещё какие-то подполя?
Читать дальше →

Javascript умирает или перерождается?

Время на прочтение4 мин
Количество просмотров21K
Заранее прошу прощения за некоторые обороты в переводе. Буду рад услышать здравую критику и поправки, лучше в пм. Спасибо. – пер.

Стартапы имеют много общего с JavaScript'ом. Когда вы только начинаете, вам нужно быть динамичными. Вы должны быть гибкими. Вы должны иметь возможность мгновенно выпустить прототип, который просто работает, и вам нужно уметь быстро и дешево менять его без перекомпиляции вашего кода. JavaScript появился когда война между браузерами только начиналась, и он раздавил Java и Flash по тем же причинам, по которым стартапы рушат рынки и вытесняют признанных игроков: быстрота и гибкость.
Умрет или не умрет?

Почему вам стоит использовать TypeScript

Время на прочтение3 мин
Количество просмотров84K
Если вы еще не в курсе: JavaScript победил. На сегодняшний день это самый кроссплатформенный язык, доступный для любых устройств. На нем можно создавать веб-приложения (клиент и сервер), в том числе с оффлайн-режимом работы, десктопные приложения (для Windows 8), приложения для смартфонов и планшетов (PhoneGap), расширения для Microsoft Office, SharePoint и Dynamics. Код на JavaScript работает в СУБД, таких как MongoDB и даже Hadoop в Windows Azure (BigData однако).

На Javascript уже написаны Doom и эмулятор Linux. Фактически решая любую задачу, кроме написания модуля ядра ОС, вы встретитесь с JavaScript. Если вы еще не знаете JavaScript, то вам следует срочно начать его изучать.
А причем тут TypeScript?

Взлом тега в 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 мин
Количество просмотров52K


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

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

Page Visibility API и побочный эффект предотрисовки страниц

Время на прочтение1 мин
Количество просмотров5.1K

Сперва, небольшой эксперимент


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

Далее интересные скриншоты и подробности

StateController. Событийная модель в разработке интерфейсов. Часть 2

Время на прочтение4 мин
Количество просмотров11K

Часть 1

В данной статье мы рассмотрим базовые понятия событийной модели StateController'а.

Зоны распространения событий


В селективной модели приложений работа ведется с теми элементами, которые были предварительно выбраны для работы. В чистой событийной модели событие должно распространяться на все элементы DOM-дерева. Это совершенно не важно на маленьких объемах, но при росте количества нод деградация скорости будет даже не линейной. Представьте себе, что событие click должно пройтись по всем нодам, чтобы определить, на каких именно элементах оно сработает. Есть предположение, что псевдокласс :hover в IE6 именно так и работал, поэтому он так сильно тормозил.

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

StateController. Событийная модель в разработке интерфейсов. Часть 1

Время на прочтение5 мин
Количество просмотров15K

Введение


Сейчас все больше и больше появляется JavaScript-фреймворков, которые несколько отличаются от нынче модного jQuery. Одни стараются реализовать MVC, другие предоставляют сильносвязанную архитектуру, третьи направлены на асинхронность, и так далее. Каждый разработчик выбирает то, что ему ближе всего, и что наиболее эффективно решает поставленную задачу. Поэтому я не буду обсуждать достоинства или недостатки фреймворков, а расскажу, к чему пришли мы в наших продуктах, какие концепции разрабатывались и какие проблемы решались.

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

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

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

Введение


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

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


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

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

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

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

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

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

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

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

Динамический шаблон Wordpress

Время на прочтение5 мин
Количество просмотров15K
При разработке одного из проектов столкнулся с необходимостью настроить вывод постов в двух вариантах:
  • Расширенный — Название, крупное изображение, анонс, некоторые ссылки
  • Компактный — Название, маленькое изображение



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

Общий алгоритм следующий:
  1. При загрузке страницы проверяется состояние параметра style в базе
  2. В зависимости от параметра посты выводятся в том или ином формате
  3. При нажатии на флажок переключения вида запускается функция getPage
  4. Функция getPage принимает значение переключателя и отправляет данные на обработку и ОЖИДАЕТ ЗАВЕРШЕНИЯ ОБРАБОТКИ
  5. Файл style_updater.php принимает данные и обновляет Базу данных.
  6. После этого функция getPage перезагрузит страницу


Подробности

Простой упаковщик CommonJS модулей для использования в браузере — clinch

Время на прочтение2 мин
Количество просмотров4.3K
Если вы пользуетесь stitch и вам его маловато, а browserify показался сложноват по настройкам — попробуйте clinch.

Что в коробке:
  • простой API
  • поддержка .js, .json, .coffee, .eco, .jade
  • develop-mode ready — легко встроить в express, умный кеш с инвалидацией
  • малый overhead на bundle ~ 40 SLOC
  • простой механизм подмены модулей и имитации глобальных объектов

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

Online-трансляция HTML5 Camp — 15 марта с 10:00

Время на прочтение1 мин
Количество просмотров7.9K
Друзья, рады напомнить (а кому-то сообщить), что завтра с 10:00 (мск) вас будет ждать online-трансляция третьего HTML5 Camp.



В рамках конференции у нас будет три трека:
  • Бизнес-дискуссии + технологические сессии
  • Технологические сессии по веб-разработке
  • Технологические сессии по разработке для Windows 8 на HTML/JS.

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

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

Время на прочтение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 мин
Количество просмотров39K
Добрый день! В этой статье я расскажу про такой компонент из QML как Loader.

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

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

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

Вклад авторов