Pull to refresh
442
0
Mikhail Davydov @azproduction

Frontend/Node.js JavaScript

Send message

WXHR: старый добрый XHR со вкусом Web Workers

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

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

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

Под катом элегантное решение (без лишних скриптов и дописывания кода приложения) этой проблемы.
Читать дальше →
Total votes 27: ↑24 and ↓3 +21
Comments 4

Web Worker Wars

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

Web Worker Wars

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


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

Далее подробные правила, пример воркера и демка.
Читать дальше →
Total votes 48: ↑41 and ↓7 +34
Comments 27

Оптимизация JavaScript: Scope, Low level ES vs ES5 Array methods

Reading time 4 min
Views 2K
Сегодня мы будем тестировать 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 — Глобальные переменные.

Читать дальше →
Total votes 17: ↑9 and ↓8 +1
Comments 29

Разбираемся с prototype, __proto__, constructor и их цепочками в картинках

Reading time 2 min
Views 33K
Есть 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 Кб больших изображений)
Читать дальше
Total votes 75: ↑58 and ↓17 +41
Comments 51

Волшебный скролл полускрытых кнопок, который может убить и ваш вечер

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

Опера 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.
Total votes 46: ↑25 and ↓21 +4
Comments 26

Пошаговая установка Node.js на Windows без виртуалок

Reading time 3 min
Views 59K


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

Прошу под кат
Читать дальше →
Total votes 68: ↑54 and ↓14 +40
Comments 19

Рекламный баннер = поставщик данных

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

Суть: клиент запрашивает какие-либо данные с веб-сервиса, ответ ему приходит не json/xml, а png рекламный-баннер часть которого блок с данными. Веб-сервис поставляет библиотеку для работы с его данными-баннерами (запрос, отображение, распаковка).
Читать дальше →
Total votes 11: ↑8 and ↓3 +5
Comments 8

Альтернативный вид страницы для opera speed dial

Reading time 1 min
Views 3.3K
Давно искал способ детекта 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
Total votes 24: ↑21 and ↓3 +18
Comments 12

Распределенные вычисления на javascript

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

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

Долго не мог придумать, что же такое можно вычислять распределенно, дабы материализировать идею… Рендерить 3D сцену — не оправдано для теста и затратно по передаваемым данным. Вспомнилась простая лабораторная работа из студентческих годов по КМФП — визуализация потенциала поля с несколькими зарядами. Предельно просто, можно вычислять распределенно.
Читать дальше →
Total votes 29: ↑26 and ↓3 +23
Comments 10

InfoTerminal for DokuWiki

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

Лого
Смотреть (Лучше в Opera в полноэкранном режиме)
! Вики плохо наполнена — лучше начать с index » wiki » dokuwiki
Читать дальше →
Total votes 17: ↑11 and ↓6 +5
Comments 17

Bravequest — RPG на Prototype.js

Reading time 1 min
Views 1.1K
Не буду вдаваться в подробности, лучше 1 раз посмотреть.
image
Игра слишком детская!
Можно посмотреть вот так
А ещё можно скачать себе
Весит около 2Мб. Проходится за 40-50 минут.

PS это 2-й мой пост за сегодня в этом блоге, не сочтите за флуд, просто появилось много времени :)
Все ресурсы игры принадлежат соответствующим правообладателям.
Total votes 17: ↑11 and ↓6 +5
Comments 8

Мирный XSS

Reading time 3 min
Views 9K
Эта статья о мирном атомеXSS. Заставим зло работать на добро!

А зачем?


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

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

  1. Через тэг iframe
  2. Через тэг script
  3. Через flash<->javascript
  4. Через window.name + iframe + form
  5. Через CSS хак
  6. Через canvas + img
  7. Через прокси
Реализация каждого метода
Total votes 98: ↑87 and ↓11 +76
Comments 23

Упрощаем разработку сайта с Site Helper

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

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

Ещё очень распространенная ситуация, когда заказчик или тестер нашел баг и не может понятно объяснить, где он находится. Ну, или заказчик решил добавить блок баннеров и также не может внятно объяснить, что и куда.
Читать дальше →
Total votes 69: ↑66 and ↓3 +63
Comments 45

Логики веб-приложений и развитие веба

Reading time 2 min
Views 2K
Было много лишнего времени, решил выделить 3 основные, по моему мнению, логики веб-приложений.
  1. Тип «раб и господин».
  2. Равномерный тип.
  3. Не придумал название тип.

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

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


Вся логика приходится на сервер, лишь малая часть на клиент.
Соотношение объема кода: клиент — 5%, сервер — 95%.
Распределение VC: почти все на сервере.
Примеры:
Веб 1,0 сайты.
Сайты на браузерах без js.
FullAjax сайты (например построенные на xAjax) в которых браузер тупо выполняет все скрипты, пришедшие с сервера.
Читать дальше →
Total votes 10: ↑3 and ↓7 -4
Comments 23

Маленькие идеи: Боремся с троеточиями в конце превью статьи

Reading time 1 min
Views 1.7K
Обычно когда не влезает какой-либо текст в какие-либо рамки его режут и в конец вставляют троеточие. Иногда оно к месту, а чаще всего все портит. Для меня троеточие ассоциируется с неким пессимистическим тоном.
Типичные примеры не к месту: «С днем победы!...», «Наконец то весна наступила...» и т.д.
Да, никто не отменял 2 окна ввода данных одно для превью другое для всей статьи.
Изложу далее мою альтернативу.
Читать дальше →
Total votes 26: ↑18 and ↓8 +10
Comments 23

Обзор Todo сервисов

Reading time 4 min
Views 8.3K
На днях искал туду сервис для идей и проектов (идей много и постоянно из головы все вылетает) и для общения с заказчиками (да, я все ещё использую сервисы 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)

Детальный обзор под хабракатом
Total votes 42: ↑39 and ↓3 +36
Comments 24

Возможно это ваш аватар, %username%

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

При регистрации на всякие веб-сооружения будто форумы блоги и др. дозволяется использовать свой аватар, загружая его из компьютера, вводя его URL или же выбирая одну из аватар в галерее. // юзер на распутье
Первый путь не хорош тем, что не каждый пользователь хранит свою аватрау на видном месте и ему приходится искать по всему компьютеру.
Второй аналогичен первому, только искать приходится в закладках и др.
Третий путь — euronews на этом месте бы показал часть галереи аватар рядового форума с подписью «no comment».
Есть и четвертый путь.
Читать дальше →
Total votes 73: ↑62 and ↓11 +51
Comments 35

Information

Rating
Does not participate
Location
Berlin, Berlin, Германия
Registered
Activity