Бывают ситуации, когда веб-приложению требуется поднять кучу данных с сервера, раскодировать их и отправить дальше по назначению. Примером этому может быть онлайн 3d редактор, где каждая модель может занимать несколько мегабайт в gzip'аном json'e.

Что же делать когда браузер среднего пользователя подвисает на секунду или даже больше при загрузке и распаковке данных?
1. Придумать что-нибудь на flash (я не уверен на 100%, но некоторые браузеры запускают плагины в основном потоке)
2. Загружать данные кусками, обрабатывать кусками.
3. Попросить пользователя сделать апгрэйд компьютера.

Все 3 варианта не очень, правда?

Под катом элегантное решение (без лишних скриптов и дописывания кода приложения) этой проблемы.

Web Worker Wars это разработанная мною игра для программистов JavaScript написанная, конечно же, на JavaScript.
Разновидность игр Бой в памяти. Чем-то похожая на Google AI Challenge или HabraWars.

Особенности и правила

1. Игра представляет собой пошаговую стратегию для 2х и более ботов
2. Каждый игрок пишет свой Web Worker, который принимает особые команды от движка игры и может возвращать действие
3. На каждый ход бот имеет 4 очка действия и может распределять их на свои действия.
4. Бот имеет ограниченное поле зрения (пример подсвечен синим на логотипе).
— Все объекты, попавшие в поле зрения, передаются в callback действия и могут быть использованы в расчетах
5. Пока бот может выполнять 2 действия:
— передвижение на 1 клетку влево, вправо, вверх, вниз, стоимостью 1 ОД
— прицельный выстрел(бьёт по клетке) на расстояние до 5 клеток, стоимостью 2 ОД, снимает 2 очка жизни или щита у врага или себя

Далее подробные правила, пример воркера и демка.

Сегодня мы будем тестировать 2 блока кода, выполняющие следующую операцию:
Дается массив, необходимо выбрать все элементы, степень 2 которых больше 5.

В синем углу Вариант А: Низкоуровневый код — старый и страшный (поддающийся частичной оптимизации)

1.    for (i = 0, res = []; i < c; i++) {
2.        t = a[i];
3.        if (t >= 2.236067) {
4.            continue;
5.        } else {
6.            res.push(t * t);
7.        }
8.    }

В красном углу Вариант Б: Высокоуровневый код — молодой и красивый (не поддающийся частичной оптимизации)

1. a.map(function (t) { return t * t}).filter(function (t) { return t > 5});

Битвы будут происходить на 3 аренах.
1. AO args — Параметры объекта активации функции.
2. AO — Локальные переменные объекта активации функции.
3. Global — Глобальные переменные.

Есть javascript код:

1. var A = function () {};
2. A.prototype.b = 100;
3. var a = new A();
4. A.prototype.c = 101;
5. a.c = -100;
6. A.prototype = {};
7. A.prototype.b = 536;
8. /* 1 */ console.log(a.__proto__.constructor.prototype.b === 536);
9. var b = new A();
10. /* 2 */ console.log(a.__proto__.__proto__.constructor === a.__proto__.constructor.prototype.constructor);
11. /* 3 */ console.log(b instanceof A);
12. /* 4 */ console.log(!(a instanceof Object));

Вопрос. Что возвратят выражения 1-4 и почему?

Затрудняетесь ответить?
Тогда вам стоит пройти под кат ;-) (Далее 600 Кб больших изображений)

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

Опера 10.63 win7

Код

<div style="float:left;height:32px;margin-right:5px;overflow:hidden;position:relative;width:330px;">
	<div class="scroll-wrapper" style="left: 0px;position:relative;width:5000px;">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
<button>Button 5</button>
<button>Button 6</button>
<button>Button 7</button>
<button>Button 8</button>
<button>Button 9</button>
<button>Button 10</button>
<button>Button 11</button>
	</div>
</div>

Линк https://dl.dropbox.com/u/2899751/opera-scroll-bug.html
Для явления волшебного скролла нажать «Button 5». Cкролл на столько волшебный, что скроллит с отключенным javascript.

Эта статья предназначена для тех, кого бесят мильён левых служб и драйверов, которые ставят любые виртуалки. Тем, кто будут ставить доп. пакеты Node.js
Все остальные могут скачать скомпилированный Node.js node-js.prcn.co.cc
Или же установить Node.js из-под виртуалки nodejs.ru/25

Прошу под кат

Представляю на ваш суд модель передачи данных от веб сервиса к клиенту — данные в баннере. На эту идею меня натолкнула статья Compression using Canvas and PNG, опубликованная на ajaxian.com ещё в 2008 году.

Суть: клиент запрашивает какие-либо данные с веб-сервиса, ответ ему приходит не json/xml, а png рекламный-баннер часть которого блок с данными. Веб-сервис поставляет библиотеку для работы с его данными-баннерами (запрос, отображение, распаковка).

Давно искал способ детекта Speed Dial от Opera, чтобы для Speed Dial отдавался специальный вид страниц.
Путем экспериментов было установлено, что в режиме «скриншотера Speed Dial» Opera устанавливает жесткие значения для document.documentElement.clientHeight и document.documentElement.clientWidth в 768 и 1024 соответственно, естественно при наличии body тега внутри документа.

Вот, собственно, код, который детектит «opera speed dial mode»:
var sd = document.documentElement.clientHeight == 768 && document.documentElement.clientWidth == 1024 && window.opera;

Страница для теста dl.dropbox.com/u/2899751/opera-speed-dial/test.html
Исходинк pastebin.com/msfc9aYj

Просто добавляем dl.dropbox.com/u/2899751/opera-speed-dial/test.html в одну из ячеек Opera Speed Dial.
В нормально режиме будет выдаваться «Common page» в режиме Speed Dial будет валлпапер с андроидом droidfreeapps.com/wp-content/uploads/2010/01/android_logo.gif

На днях открыл для себя Life with Playstation, но суть не в нем, а в фоновом процессе Folding@home. Проект распределённых вычислений для проведения компьютерной симуляции свёртывания молекул белка. Пока мы читаем новости, смотрим погоду наша PS3 производит вычисления для Folding@home.

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

Долго не мог придумать, что же такое можно вычислять распределенно, дабы материализировать идею… Рендерить 3D сцену — не оправдано для теста и затратно по передаваемым данным. Вспомнилась простая лабораторная работа из студентческих годов по КМФП — визуализация потенциала поля с несколькими зарядами. Предельно просто, можно вычислять распределенно.

Потрогать можно тут

InfoTerminal for DokuWiki – альтернативный интерфейс для популярной и лёгкой вики. В сочетании с DokuWiki это можно назвать системой управления информационным терминалом.


Смотреть (Лучше в Opera в полноэкранном режиме)
! Вики плохо наполнена — лучше начать с index » wiki » dokuwiki

Не буду вдаваться в подробности, лучше 1 раз посмотреть.

Игра слишком детская!
Можно посмотреть вот так
А ещё можно скачать себе
Весит около 2Мб. Проходится за 40-50 минут.

PS это 2-й мой пост за сегодня в этом блоге, не сочтите за флуд, просто появилось много времени :)
Все ресурсы игры принадлежат соответствующим правообладателям.

Привет, хочу представить одну интересную разработку студии, в которой я работаю. И как ведущий разработчик буду её освещать :)

Эта статья о мирном атомеXSS. Заставим зло работать на добро!

А зачем?

Простейший пример всё объяснит:
Вы разрабатываете веб-сервис, который поставляет данные другим сайтам (погода, данные по торгам в реальном времени, чат и т.п). Вам нужно организовать кроссайтовую передачу данных(данные погоды, торгов, текст чата) на стороне клиента.

Методы организации XSS

1. Через тэг iframe
2. Через тэг script
3. Через flash<->javascript
4. Через window.name + iframe + form
5. Через CSS хак
6. Через canvas + img
7. Через прокси

Site Helper(SH) – тулза для помощи верстальщикам, а также хороший инструмент для общения верстальщик-программер-руководитель, а так же руководитель-клиент «не отходя от сайта» незаметно для обычных пользователей и в реальном режиме времени.

Наверное, каждый, кто хотя бы разверстал пиксель в пиксель под каждый браузер, сталкивался с ситуацией, когда что-то едет, не совпадают высоты ширины блоков… ситуация знакомая.
Тут может спасти PixelPerfect или сетка разметки на js или SH ;)

Ещё очень распространенная ситуация, когда заказчик или тестер нашел баг и не может понятно объяснить, где он находится. Ну, или заказчик решил добавить блок баннеров и также не может внятно объяснить, что и куда.

Было много лишнего времени, решил выделить 3 основные, по моему мнению, логики веб-приложений.

1. Тип «раб и господин».
2. Равномерный тип.
3. Не придумал название тип.

Логику я буду делить по простому принципу: объем кода клиент/сервер, распределению вида и контроллера на клиент и сервер.

Тип раб и господин.

Вся логика приходится на сервер, лишь малая часть на клиент.
Соотношение объема кода: клиент — 5%, сервер — 95%.
Распределение VC: почти все на сервере.
Примеры:
Веб 1,0 сайты.
Сайты на браузерах без js.
FullAjax сайты (например построенные на xAjax) в которых браузер тупо выполняет все скрипты, пришедшие с сервера.

Обычно когда не влезает какой-либо текст в какие-либо рамки его режут и в конец вставляют троеточие. Иногда оно к месту, а чаще всего все портит. Для меня троеточие ассоциируется с неким пессимистическим тоном.
Типичные примеры не к месту: «С днем победы!...», «Наконец то весна наступила...» и т.д.
Да, никто не отменял 2 окна ввода данных одно для превью другое для всей статьи.
Изложу далее мою альтернативу.

На днях искал туду сервис для идей и проектов (идей много и постоянно из головы все вылетает) и для общения с заказчиками (да, я все ещё использую сервисы 20 века ICQ, Email :) ).
Ставились следующие приоритеты:

• Удобство навигации (множитель 1,0)
• Удобство управления туду-списками (множитель 1,0)
• Collaboration (множитель 1,0)
• Дизайн интерфейса (множитель 0,8)
• Качественная справочная система (множитель 0,8)
• Русский интерфейс по большему счету для удобства заказчика (множитель 0,8)
• Добавление задачи по Email (множитель 0,5)
• Интеграция с GMail/Google Calendar (множитель 0,5)
• Наличие API (множитель 0,5)
• Оповещение по Email (множитель 0,5)
• Оповещение по IM (ICQ, Jabber, Skype, MSN, Google Talk) (множитель 0,5)
• Интерфейс для сотовых и КПК (множитель 0,3)
• Чтобы это меня впечатлило — эмоции от проекта (множитель 0,1)

Коллекция моих handmade тумбнайлсов для Opera SpeedDial.

Совсем недавно гуляя от нечего делать по просторам Интернет, решил поискать все мои загруженные аватары через всем известные поисковики картинок. И тут, как оно всегда бывает, пришло озарение…

При регистрации на всякие веб-сооружения будто форумы блоги и др. дозволяется использовать свой аватар, загружая его из компьютера, вводя его URL или же выбирая одну из аватар в галерее. // юзер на распутье
Первый путь не хорош тем, что не каждый пользователь хранит свою аватрау на видном месте и ему приходится искать по всему компьютеру.
Второй аналогичен первому, только искать приходится в закладках и др.
Третий путь — euronews на этом месте бы показал часть галереи аватар рядового форума с подписью «no comment».
Есть и четвертый путь.