Pull to refresh

Firefox 4 значительно ускорится и получит поддержку inline SVG

Firefox
Translation
Вечером 30 июня «Мозилла» явилась в Лондон в Англии, чтобы поведать про дополнения («Mozilla Add-Ons») и показать некоторые новые клёвые особенности грядущего Файерфокса 4.

Вероятно, наиболее впечатляющими (если не считать средства создания дополнений «Add-Ons Builder», основанного на «Беспине») оказались следующие будущие возможности Firefox 4:

→  отображение HTML5-видео (<video>)

→  рисование на холсте (<canvas>)

→  манипулирование изображениями на холсте (анализ пикселов, распознавание лиц с помощью opencivitas)

→  технологии «зелёного экрана» (хромакей) в иллюстрациях и видео, достигаемые анализом цвета пикселов

→  HTML5, встраиваемый внутрь SVG (ура!)

→  SVG как <img>

→  SVG как CSS-фон

→  SVG-фильтры, SVG-маски, SVG-контуры обрезки

→  SVG-анимация

→  inline SVG (то есть SVG внутри HTML5)

→  CSS3: селекторы, @font-face, 2D-преобразования (transforms), переходы (transitions), тени, градиенты, вычисления — calc(2em-10px)

→  API: геопозиция (geolocation), оффлайн (IndexDB, localStorage, AppCache, FileAPI: чтение двоичного содержимого из файла, перетаскивание файлов), веб-труженики (web workers) и сокеты (websockets)

→  контроллер на вебсокетах, запускающий презентацию с мобильника

→  WebGL

Некоторые из этих способностей подтверждались демонстрациями:

→  фильтры CSS3 и маски SVG на HTML5-видео:

Читать дальше →
Total votes 118: ↑97 and ↓21 +76
Views 940
Comments 72

DOM Storage window broadcast

JavaScript *
В статье речь пойдет об интересном DOM Storage эвенте, который позволяет выполнять броадкаст общение между окнами обраузера одного домена не подозревающих об существовании друг друга.

image

DOM Storage (localStorage sessionStorage) кроме потрясающей возможности хранения информации на клиенте имеет ещё одну документированную, но малоизвестную возможность — уведомление об изменении/удалении элемента DOM Storage для всех окон открытых из текущего домена.
Читать дальше →
Total votes 49: ↑48 and ↓1 +47
Views 7.4K
Comments 5

Распределенные вычисления на JavaScript: Сегодня

JavaScript *
В настоящее в время существует огромное количество сетей распределенных вычислений. Я насчитал порядка 30. Наиболее крупные — Folding@home, BOINC, SETI@home, Einstein@Home, Rosetta@home (по результатам их вычислений было написано несколько десятков диссертаций). Вычисляют они все, что только можно вычислять распределено — от подбора md5 паролей до симуляции свертывания белка.
Каждая из эти сетей имеет необычно высокую производительность и включает в себя миллионы нодов. Производительность каждой сравнима с производительностью суперкомпьютера.
  • Rosetta@home — более 110 Тфлопс
  • Einstein@Home — более 355 Тфлопс
  • SETI@home — более 560 Тфлопс
  • BOINC — более 5.6 Пфлопс
  • Folding@home — более 5.9 Пфлопс
  • Bitcoin — более 9.4 Пфлопс
Сравните с суперкомпьютерами:
  • Blue Gene/L (2006) — 478.2 Тфлопс
  • Jaguar (суперкомпьютер) (2008) — 1.059 Пфлопс
  • IBM Roadrunner (2008) — 1.042 Пфлопс
  • Jaguar Cray XT5-HE (2009) — 1.759 Пфлопс
  • Тяньхэ-1А (2010) — 2.507 Пфлопс
  • IBM Sequoia (2012) — 20 Пфлопс
А теперь, давайте, подсчитаем существующий неиспользуемый потенциал пользователей интернет:
По расчетам на конец 2010 года пользователей Инернет было около 2000000000 (2 млрд).
Каждый пользователь имеет хотя бы 1 ядро процессора производительностью не менее 8 Гфлопс (AMD Athlon 64 2,211 ГГц).

По нехитрым математическим расчетам производительность такой сети составит:
8 * 109 * 2 * 109 = 16 эксафлопс (1018).
Такая сеть в 800 раз производительней, чем ещё не построенная IBM Sequoia (2012), в 1700 раз производительней, чем сеть Bitcoin и производительней всех суперкомьютеров и вычислительных сетей вместе взятых! Сейчас число пользователей ПК и Интерент растет, растет и число ядер. Безусловно, это число (16 эксафлопс) идеальное, никто не будет вычислять 24/7, но если каждый пользователь будет вычислять хотя бы 2 минуты в день (что, впринципе, более чем реально), то такая сеть сравнится с IBM Sequoia.

Сейчас распределенные браузерные вычислительные сети на JavaScript более чем реальны.
Читать дальше →
Total votes 122: ↑117 and ↓5 +112
Views 10K
Comments 87

К JavaScript-Linux прикрутили «диски постоянной памяти»

Configuring Linux *
Уникальная разработка Фабриса Беллара, JavaScript-эмулятор компьютера с Linux, продолжает развиваться.

В модифицированной версии jslinux (запускается файлом emulator.html) к эмулятору компьютера прикручено самое последнее ядро Linux 3.0.4, а также драйвер для установки виртуальных дисков для хранения информации (persistent block device).

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

Диск размещается в локальном хранилище HTML5 и доступен в операционной системе каждый раз при открытии страницы emulator.html. Правда, он работает очень медленно и сильно ограничен в объёме (около 1 МБ).
Total votes 66: ↑59 and ↓7 +52
Views 1.1K
Comments 26

Sisyphus.js — защищаем данные форм пользователя от случайных потерь

Website development *

В чём проблема?


Бывали ли у вас случаи, когда во время долгого заполнения нудной формы или написания красноречивого и пылкого комментария *внезапно* крашился браузер? Или вы закрывали вкладку, в которой работаете, или отключалось электропитание (а ИБП, по известному закону, нет)? Если нет — то вам повезло, но страховки от подобных происшествий ни у кого нет.

Представьте себе бурю эмоций, испытываемых пользователем, только что потерявшим все вводимые данные — а ведь оставалось немного допечатать и отправить форму. Вот если бы только был способ восстановить эти данные, а не заниматься сизифовым трудом…
Читать дальше →
Total votes 139: ↑136 and ↓3 +133
Views 7.6K
Comments 74

Реализация автограф-сессии автора для iBooks

IT-companies
Sandbox
Я работаю в маленьком издательстве. И, после выпуска бумажной версии детской книжки решили сделать и ее электронный вариант для iPad. Не приложение, а именно книгу в формате eEub.
Договорились о презентации в крупном торговом центре: бумажные книжки продаются, автор их подписывает, iPad-версия скачивается посетителями центра, плюс они же играются с анимацией на предоставленных iPad'ах.
Но, если автор подписывает бумажные книги, почему бы не подписать и электронную?
Идея новая и оригинальная, но реализуемая ли?
Скажу сразу, реализовать подписывание не удалось, и вот почему…
Читать дальше →
Total votes 36: ↑26 and ↓10 +16
Views 548
Comments 6

Работа с локальным хранилищем, как с объектом? Легко!

Website development *JavaScript *
Tutorial
Когда появился localStorage я был рад, как слон, но, немногим позже, после подробного изучения вопроса, я несколько разочаровался: там могут храниться только строки, а об объектах можно было забыть. Приходилось превращать их в строки для хранения, приходилось обратно конвертировать строку в объект для работы с ним, затем опять конвертировать в строку, чтоб сохранить. Не спорю, есть замечательные библиотеки, позволяющие манипулировать хранилищем максимально просто, но вызывать функции как-то не очень хотелось.

localStorage = { a: { b: 1 }, c: { d: 2 } }
localStorage.a.b = 3;

Круто было бы, не так ли?

Относительно давно, где-то около полугода назад я задался вопросом: как же, блин, сделать так, чтоб можно было работать с localStorage вообще без функций, чисто как с объектом. Challenge accepted!

Как говорит небезызвестный Геша: “Всё, я здзелал”.

Дальше читать не обязательно. Более разумное решение находится здесь: habrahabr.ru/post/144998

Читать дальше →
Total votes 60: ↑49 and ↓11 +38
Views 14K
Comments 35

Работа с локальным хранилищем, как с объектом — Продолжение

Website development *JavaScript *
Tutorial
Этим постом я бы хотел исправиться и предложить адекватный способ работы с хранилищем, как с объектом. Код из поста «Работа с локальным хранилищем, как с объектом? Легко!» использовать крайне не рекомендую, там всё плохо (минусы изложены внизу). Цель данного — объяснить всем тем, кто добавил статью по ссылке в избранное или поставил плюсик, никогда не использовать этот код.

Сейчас же я хочу продемонстрировать простейшую идею, предложенную Scalar в комментарии.

При загрузке страницы (даже до события готовности DOM дерева) обращаемся к хранилищу (в данном случае, это localStorage и sessionStorage), получить JSON, десериализовать его и положить в какую-нибудь переменную.
localObject = JSON.parse( localStorage.getItem( '_myStorage' ) ); // "{'a':1, 'b':2}" → {a:1, b:2}

Затем, каждые N миллисекунд производить обратный процесс:
localStorage.setItem( '_myStorage', JSON.stringify( localObject ) );

При событии onbeforeunload делать то же самое.

Реализация идеи проста (уровень сложности задачи низок и доступен даже новичку). Но, не все (и я в том числе) до этого додумались.
Код конструктора ObjectStorage
var ObjectStorage = function ObjectStorage( name, duration ) {
	var self,
		name = name || '_objectStorage',
		defaultDuration = 5000;
		
	// дабы не плодить кучу экземпляров, использующих один и тот же ключ хранилища, 
	// просто возвращаем единственный с заданным именем,
	// меняя только duration (если имеется)
	if ( ObjectStorage.instances[ name ] ) {
		self = ObjectStorage.instances[ name ];
		self.duration = duration || self.duration;
	} else {
		self = this;
		self._name = name;
		self.duration = duration || defaultDuration;
		self._init();
		ObjectStorage.instances[ name ] = self;
	}
	
	return self;
};
ObjectStorage.instances = {};
ObjectStorage.prototype = {
	// type == local || session
	_save: function ( type ) {
		var stringified = JSON.stringify( this[ type ] ),
			storage = window[ type + 'Storage' ];
		if ( storage.getItem( this._name ) !== stringified ) {
			storage.setItem( this._name, stringified );
		}
	},

	_get: function ( type ) {
		this[ type ] = JSON.parse( window[ type + 'Storage' ].getItem( this._name ) ) || {};
	},

	_init: function () {
		var self = this;
		self._get( 'local' );
		self._get( 'session' );

		( function callee() {
			self.timeoutId = setTimeout( function () {
				self._save( 'local' );
				callee();
			}, self._duration );
		})();

		window.addEventListener( 'beforeunload', function () {
			self._save( 'local' );
			self._save( 'session' );
		});
	},
	// на случай, если нужно удалить таймаут (clearTimeout( storage.timeoutId ))
	timeoutId: null,
	local: {},
	session: {}
};



Использование:
var storage = new ObjectStorage;
storage.local = {a:4, b: {c:5}};
storage.session = {a:7, b: {c:8}};
b = storage.local.b;
b.c = {d:6};

Читать дальше →
Total votes 28: ↑21 and ↓7 +14
Views 13K
Comments 42

Удобная работа с LocalStorage. Ну и с SessionStorage заодно

JavaScript *
Хочу представить вашему вниманию библиотеку для удобной работы с Local и Session Storage. Она появилась, как побочный продукт работы над проектом и содержит несколько довольно удобных функций. Библиотека поддерживает все современные браузеры, а именно:

  • Internet Explorer 8+
  • Mozilla Firefox 3.5+
  • Google Chrome 4+
  • Safari 4+
  • Opera 10.5+

Помимо традиционных — set/get/inc/dec, есть набор удобных «вкусностей»:

  • inc работает со строками
  • extend для объектов
  • много методов для работы с массивами
    • обычные append/prepend/takeLast/takeFirst/getLast/getFirst
    • с проверкой уникальности — .appendUnique/.prependUnique
    • во все append/prepend методы можно передавать лимит — удобно для организации MRU списков
  • calls chaining — я от него в восторге :)

Если заинтересовал — прошу под кат за примерами. Мне кажется они достаточно хорошо показывают возможности библиотеки.

Читать дальше →
Total votes 32: ↑28 and ↓4 +24
Views 23K
Comments 19

Оптимизация длинных списков логических значений на JavaScript

Website development *JavaScript *Client optimization *
Sandbox
Очень часто в веб-разработке (и в программировании вообще) необходимо сохранить длинный список логических значений (yes/no, true/false, checked/unchecked и подобные) в виде строк. К примеру, вы захотите записать такие данные с помощью localStorage, в cookie, или отправить их в теле HTTP запроса. У меня возникала такая необходимость сотни раз.
Читать дальше →
Total votes 24: ↑23 and ↓1 +22
Views 3.5K
Comments 19

Система уведомлений о событиях на сайте (на примере аудиоплеера ВКонтакте)

Website development *
Приветствую.

Думаю, многие, кто имеет аккаунт ВКонтакте и слушает там музыку, замечали, что если на одной вкладке включить трек, а затем уже на другой включить второй, первый трек уйдет в паузу. Примерно то же самое происходит с различными уведомлениями (новое сообщение, ответ на комментарий/запись и т.д.) — отображается оно только в активной вкладке. Кому интересно как это работет и каким образом сделать подобное у себя на сайте, милости просим за хабракат.
Читать дальше →
Total votes 94: ↑90 and ↓4 +86
Views 37K
Comments 38

Улучшаем опыт взаимодействия с формами

Website development *JavaScript *HTML *
Часто меня спрашивают студенты: «Какой элемент сайта самый важный?», на что я им отвечаю — формы. Ведь с помощью форм пользователи совершают почти все конверсионные действия. Именно с этим элементом связано больше всего проблем. В этой статье я постараюсь рассказать, что можно улучшить при взаимодействии с формами. А заодно описать новые возможности работы с ними в браузерах.

Однако, сначала я бы хотел обозначить свою позицию по разработке таких форм. По-моему мнению, правильным подходом при разработке интерфейсов является подход прогрессивного улучшения.
Читать дальше →
Total votes 93: ↑88 and ↓5 +83
Views 44K
Comments 32

Крошечный контейнер для мини-приложений в 30 строк на чистом JS

Abnormal programming *JavaScript *
Sandbox
Увидев на хабрахабре крутые реализации программ в 30, 24, 19 и даже 1 строчку, тоже решил поморать чистые страницы хабра чем-нибудь этаким. Тем более, что давно хочется инвайт выпала возможность поработать в новом для себя качестве.

Дело в том, что по работе мне пришлось учиться писать расширения для хрома. Так как задача сама по себе была небольшая, то первой мыслью естесственно было написать лапшекод в лоб. Но помучившись с получением и сохранением данных в localStorage, решил, что так дело не пойдет, и, уж как минимум, надо написать какую-нить обертку над localStorage.

Вообще в самом начале я честно погуглил на предмет наличия разных фреймворков для расширений. Нашел, например, Kango. Но мне не нужна была кроссбраузерность (расширение писалось только для Chrome), и не было желания заморачиваться изучением сторонних библиотек ради небольшого приложения, поэтому было решено написать свой велосипед.

Задачи, которые ставились перед контейнером:
  • Удобная работа с localStorage. Получаем и сохраняем любые данные, в том числе объекты и массивы.
  • Какая-нибудь валидация параметров (хотя бы в случае, если такого параметра в localStorage просто нет).
  • Возможность фасовать параметры по группам — плохо когда все свалено в одну кучу.
  • Подключение функциональности с разносом по отдельным компонентам, при этом вероятно будет необходима преинициализация некоторых параметров.

В принципе все удалось реализовать в небольшом контейнере, и для небольших приложений он меня устраивает на 100%.
Читать дальше →
Total votes 34: ↑9 and ↓25 -16
Views 3.2K
Comments 3

[Перевод] Cross-Storage: Сделайте локальные данные доступными между доменами

JavaScript *
Translation
image

Как мы знаем localStorage API имеет некоторые ограничения, которые, возможно, придется обходить при написании крупных приложений. Новая библиотека cross-storage* дает возможность меж-доменной поддержки localStorage с использованием полномочий. Данная библиотека так же включает в себя Promise API для стандарта ES6.
Далее
Total votes 18: ↑15 and ↓3 +12
Views 4.8K
Comments 4

Работа веб-проекта в условиях нестабильного подключения

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

Рассмотрим 3 примера: интернет-магазин, кинотеатр и онлайн-плеер. Для магазина и кинотеатра так же идет разделение на 2 части — что делать на стороне пользователя и на стороне оператора/продавца.
Так что делать при потере коннекта?
Total votes 52: ↑43 and ↓9 +34
Views 25K
Comments 20

Одностраничный магазин на Phalcon PHP + AngularJS. Работа над ошибками

Website development *PHP *ООP *Angular *Phalcon *
image

Введение

Всем привет! Не так давно я написал публикацию «Одностраничный магазин с корзиной на Phalcon + AngularJS + Zurb Foundation», которая имела неоднозначный эффект мягко говоря. А точнее получила много отрицательных комментариев, какие-то были объективные и конструктивные, какие-то нет, и они меня заставили задуматься, почему так произошло, ведь я хотел сделать полезный мануал, который пригодиться мне и другим, начинающим писать на AngularJS.

Исповедь

Да, мануал был полезен для меня, для меня старого, того, кому в 2009 году отказали в работе в местной веб-студии, и он по сей день ни разу ни работал в команде, ни разу не работал на наёмной работе, а полагался только на себя, и главным критерием эффективности реализации проектов был один — главное, что работает. Но это я — старый, после написания той статьи, и множества комментариев, я впервые решил попробовать сделать всё по правилам хорошего тона, хотя бы ради интереса.
Что из этого вышло?
Total votes 51: ↑37 and ↓14 +23
Views 39K
Comments 55

Надёжный localStorage для букмарклетов

Firefox JavaScript *Internet Explorer Google Chrome Browsers
В отличие от расширений, букмарклеты хороши простотой и кроссбраузерностью. Конечно, они ограничены контекстом окна (содержимого страницы), но часто этого достаточно. А с возникновением механизма localStorage у них появился простой способ сохранять и запрашивать данные на стороне клиента.
Читать дальше →
Total votes 25: ↑21 and ↓4 +17
Views 11K
Comments 2

Моделирование объектов для анимации на Canvas

Website development *Game development *HTML *Canvas *
Быстрый и простой API, поддержка браузерами — это то, что делает Canvas привлекательным. Но, как это часто бывает, простота одновременно является и слабой стороной. Без труда, например, можно вывести прямоугольник, окружность, линию или навесить изображение. Но разработать на этой простой основе полезный контент — задача чуть сложнее.

Изображение - сила canvas

На примере разработки игры, показан подход к анимации и управлению игровым объектом.
Читать дальше →
Total votes 12: ↑10 and ↓2 +8
Views 11K
Comments 0

Как заставить сайт работать в виде Web App (никому не интересный пример частного решения, к тому же плохо описанный)

Website development *JavaScript *Development for iOS *
Наверное, это — своего рода продолжение темы «Отличия в адаптации сайта и AJAX веб-приложения для iOS» и развитие идеи из моего комментария там.

Тема старая, но для многих до сих пор актуальная. В целом, внутри будет много частностей, поскольку целью не является придумать универсальное решение, а всего лишь надо заставить один конкретный сайт работать как Web App, не прибегая к большим модификациям. В общем, как обычно, кому интересно — под кат, остальные проходят мимо, наверное.
Читать дальше →
Total votes 18: ↑8 and ↓10 -2
Views 4.3K
Comments 0

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

Website development *JavaScript *HTML *
Sandbox

Привет, Хабр! Представляю вашему вниманию перевод статьи "Please Stop Using Local Storage" автора Randall Degges.


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

Читать дальше →
Total votes 38: ↑22 and ↓16 +6
Views 79K
Comments 42
1