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

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

Автоматическая компиляция спрайтов средствами Compass

http://www.codechewing.com/library/automatically-generate-css-sprites-with-sass/

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/

Синхронизация контактов телефона

Долго и муторно пытался найти приложение для синхронизации контактов телефона (он у меня старый, поддерживает только java-приложения). Нашёл только web-сервис https://www.phonecopy.com/ru/. Работает достаточно быстро, нареканий никаких. Потом можно скачать контакты в csv.

Эмуляция запросов к серверу в angular.js

Очень удобно, если сначала разрабатывается полностью клиентская часть.

Директивы для Angular.js

Писать свои директивы для angular.js просто, а использовать их потом — удобно.

pointer-events: пробрасывание событий через SVG-слой ниже

В css надо написать:

#my-cool-svg {
  pointer-events: none;
}

#my-cool-svg {

pointer-events: none;

}

Можно делать с событиями много интересного, подробнее здесь: https://developer.mozilla.org/en-US/docs/CSS/pointer-events

Скачивание видео с Youtube из командной строки

http://rg3.github.com/youtube-dl/ Использование:

youtube-dl -o funny_video.flv "http://some/video"

1	youtube-dl -o funny_video.flv "http://some/video"

youtube-dl -f 'best[ext=mp4]/best' --limit-rate 2M -o '%(playlist)s/%(playlist_index)s - %(title)s.%(ext)s' https://www.youtube.com/playlist?list=PLt6kNtUbjfc_ZbPDz76mWGTLQsAxSiVvu

1	youtube-dl -f 'best[ext=mp4]/best' --limit-rate 2M -o '%(playlist)s/%(playlist_index)s - %(title)s.%(ext)s' https://www.youtube.com/playlist?list=PLt6kNtUbjfc_ZbPDz76mWGTLQsAxSiVvu

P.S.: Копирование файлов по ssh в shell.

Аналог Google.Wave

Совместное редактирование документов https://hackpad.com/