Category Archives: javascript

Библиотека для Node.js для нереально больших нагрузок

https://hacks.mozilla.org/2013/01/building-a-node-js-server-that-wont-melt-a-node-js-holiday-season-part-5/ Использование:

var toobusy = require('toobusy');
 
app.use(function(req, res, next) {
  if (toobusy()) res.send(503, "I'm busy right now, sorry.");
  else next();
});

var toobusy = require('toobusy');

app.use(function(req, res, next) {

if (toobusy()) res.send(503, "I'm busy right now, sorry.");

else next();

});

Т.е. при большой занятости показывает всем 503 (в этом примере), от чего проку конечно мало. Но делает очень быстро, а в реальных условиях можно отдавать страницу-заглушку, практически не нагружая сервер. Интересно то, как он меряет — меряет очередь заданий во внутреннем цикле Node.js

jQuery-библиотечка для работы с textarea

https://github.com/Codecademy/textarea-helper

Интернационализация Node.js-приложения от John Resig

Он написал свой модуль для node. Обсуждение — http://ejohn.org/blog/a-strategy-for-i18n-and-node/

Object.watch

Возможность наблюдать за изменениями свойств объекта. Описание — https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/watch#Examples, http://dailyjs.com/2012/11/12/code-review-watch-js/. Object.watch-polyfill — https://gist.github.com/384583. Известная в узких кругах библиотека для отслеживания изменений свойств объекта — https://github.com/melanke/Watch.JS.

Google Chrome DevTools Grab bag (Breakpoint Episode 5)

В этом видео рассказывается о новых возможностях консоли Chrome: Тестирование мобильной версии сайта с помощью подмены User Agent, метрик устройства, эмуляции touch-событий и ориентации устройства. Подмена media type, чтобы посмотреть как выглядит версия сайта, к примеру, при выводе на печать. (09:16) CSS Regions (патч от Adobe) (11:11) Подсветка селектора (14:53) Возможность проинспектировать локальную область видимости …

Документация по Grunt

https://github.com/gruntjs/grunt/wiki — wiki проекта.

Grunt: Перезагрузить окно браузера при изменении файла

Вот способ для Mac OS и safari — http://www.2ality.com/2012/08/jsreload.html. P.S.: надо реализовать свой велосипед для Хрома и фаерфокса. Вот пакет для перезагрузки нужного таба в Chrome для android — https://github.com/brianleroux/chrome-for-android-remote-debugging, работа протокола описана здесь — https://developers.google.com/chrome-developer-tools/docs/remote-debugging, http://developer.chrome.com/trunk/extensions/debugger.html

Оптимизация трафика клиент-сервер на примере WebSocket

С использованием node.js http://buildnewgames.com/optimizing-websockets-bandwidth/

requestAnimationFrame для оптимизации анимации в браузере

Это замена обычной покадровой отрисовки по setTimeout. Пример:

(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();
 
var start = window.mozAnimationStartTime;  // Only supported in FF. Other browsers can use something like Date.now().
 
function step(timestamp) {
  var progress = timestamp - start;
  d.style.left = Math.min(progress/10, 200) + "px";
  if (progress < 2000) {
    requestAnimationFrame(step);
  }
}
 
requestAnimationFrame(step);

(function() {

var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||

window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

window.requestAnimationFrame = requestAnimationFrame;

})();

var start = window.mozAnimationStartTime; // Only supported in FF. Other browsers can use something like Date.now().

function step(timestamp) {

var progress = timestamp - start;

d.style.left = Math.min(progress/10, 200) + "px";

if (progress < 2000) {

requestAnimationFrame(step);

}

requestAnimationFrame(step);

Polyfill:

var requestAnimationFrame = window.requestAnimationFrame
	|| window.webkitRequestAnimationFrame
	|| window.mozRequestAnimationFrame
	|| window.oRequestAnimationFrame
	|| window.msRequestAnimationFrame
	|| function (callback) {
	return window.setTimeout(callback, 1000 / 60);
};

var requestAnimationFrame = window.requestAnimationFrame

|| window.webkitRequestAnimationFrame

|| window.mozRequestAnimationFrame

|| window.oRequestAnimationFrame

|| window.msRequestAnimationFrame

|| function (callback) {

return window.setTimeout(callback, 1000 / 60);

};

https://developer.mozilla.org/en-US/docs/DOM/window.requestAnimationFrame, http://habrahabr.ru/post/114358/ http://www.xiper.net/collect/js-plugins/overclock-site/programm-animation.html (пример перевода анимации с setTimeout)

Magna Charta

Библиотечка для рисования диаграмм (чартов) на jQuery. https://github.com/alphagov/magna-charta. Примеры — http://alphagov.github.com/magna-charta/