Category Archives: Programming

Логирование времени загрузки страниц в piwik

В продолжение темы логирования ошибок в пивик. Неплохо было бы логировать в ту же систему и время загрузки страницы у реальных пользователей. Для этого в упомянутый в предыдущей статье логгер нужно добавить следующее:

	function logTimings()
	{
		setTimeout(function () {
			if (! window.performance || ! window.performance.timing) {
				return;
			}
			var timing = window.performance.timing;
			var perf = {
				dns_lookup: getTime(timing, 'domainLookupStart', 'domainLookupEnd'),
				ttfb: getTime(timing, 'requestStart', 'responseStart'),
				response: getTime(timing, 'responseStart', 'responseEnd'),
				dom_parse_and_js: getTime(timing, 'domLoading', 'domInteractive'),
				dom_ready_cbs: getTime(timing, 'domContentLoadedEventStart', 'domContentLoadedEventEnd'),
				to_dom_ready: getTime(timing, 'responseStart', 'domContentLoadedEventEnd'),
				to_load: getTime(timing, 'responseStart', 'domComplete')
			};

			perf.type = 'timings';
			perf.msg = perf.to_dom_ready;
			perf.ua = navigator && navigator.userAgent;
			perf.href = window.location.href;

			logToPiwik(perf);
		}, 5000);
	}

	function getTime(timing, from, to)
	{
		if (timing[from] && timing[to]) {
			return (timing[to] - timing[from]) / 1000;
		}
		return null;
	}

function logTimings()

{

setTimeout(function () {

if (! window.performance || ! window.performance.timing) {

return;

}

var timing = window.performance.timing;

var perf = {

dns_lookup: getTime(timing, 'domainLookupStart', 'domainLookupEnd'),

ttfb: getTime(timing, 'requestStart', 'responseStart'),

response: getTime(timing, 'responseStart', 'responseEnd'),

dom_parse_and_js: getTime(timing, 'domLoading', 'domInteractive'),

dom_ready_cbs: getTime(timing, 'domContentLoadedEventStart', 'domContentLoadedEventEnd'),

to_dom_ready: getTime(timing, 'responseStart', 'domContentLoadedEventEnd'),

to_load: getTime(timing, 'responseStart', 'domComplete')

};

perf.type = 'timings';

perf.msg = perf.to_dom_ready;

perf.ua = navigator && navigator.userAgent;

perf.href = window.location.href;

logToPiwik(perf);

}, 5000);

}

function getTime(timing, from, to)

{

if (timing[from] && timing[to]) {

return (timing[to] - timing[from]) / 1000;

}

return null;

}

И поправить window.onload на:

	window.onload = function()
	{
		if (! window.__angularLoaded) {
			window.logError({type: 'app-not-started'});
		}

		logTimings();
	};

window.onload = function()

{

if (! window.__angularLoaded) {

window.logError({type: 'app-not-started'});

}

logTimings();

};

Подробнее об объекте window.performance.timing можно почитать тут — https://blog.bullgare.com/2014/12/%D0%BC%D0%BE%D0%BD%D0%B8%D1%82%D0%BE%D1%80%D0%B8%D0%BD%D0%B3-%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B8-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B-%D1%81-navigation-timing-api/ или сразу на mdn https://developer.mozilla.org/en-US/docs/Web/API/PerformanceTiming.

Реализация определения размера устройства в AngularJS

Идея описана здесь — https://blog.bullgare.com/2013/12/%D0%BE%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D1%82%D0%B8%D0%BF%D0%B0-%D1%83%D1%81%D1%82%D1%80%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0-%D0%B2-js-%D1%87%D0%B5%D1%80%D0%B5%D0%B7-media/. Т.е. через media-queries задавать параметры, которые определят размеры устройства, по этим параметрам менять z-index. Затем создать в js-файле такой элемент скрытым и считывать его z-index в любой момент. Особенно это удобно делать в css-препроцессорах, чтобы параметризовать параметры media-queries. Тогда изменения внешнего вида сайта через css будут происходить одновременно с изменением …

AngularJS-приложение на TypeScript

Большую часть видео рассказывают о том, что вообще такое TypeScript, а примеры с AngularJS начинаются на 16-17 минуте. https://youtu.be/U7NYTKgkZgo В конце видео есть ссылки на код на гитхабе. Вот они: https://github.com/DanWahlin/AngularIn20TypeScript https://github.com/DanWahlin/AngularIn20JavaScript https://github.com/DanWahlin/AngularTypeScript

Benchpress: автоматическое тестирование производительности AngularJS-компонент

Использование для своего приложения https://youtu.be/e6J_JZaIOAQ Что это такое и как используется для разработки AngularJS core https://youtu.be/x1PJn5qMUT4

Логирование js-ошибок в piwik (аналог google analytics)

Piwik — аналог google analytics, который ставится на свой домен. Копирует апи google analytics, так что всё описанное можно с небольшими изменениями применить и при использовании google analytics.

Кратко про создание мобильных приложений из single page application

http://bunsch.pl/2014/09/21/buiding-offline-mobile-html5-apps/

AngularJS: как следить за изменением значения произвольных функций

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

function getParams()
{
	if (! map) {
		return false;
	}
	var center = map.getCenter(),
		size = map.getSize(),
		markersList = exportMarkers();

	return {
		zoom: map.getZoom(),
		lat: roundCoord(center.lat),
		lng: roundCoord(center.lng),
		minZoom: 3,
		maxZoom: 18,
		mapWidth: size.x,
		mapHeight: size.y,
		markers: markersList
	};
}

function getParams()

{

if (! map) {

return false;

}

var center = map.getCenter(),

size = map.getSize(),

markersList = exportMarkers();

return {

zoom: map.getZoom(),

lat: roundCoord(center.lat),

lng: roundCoord(center.lng),

minZoom: 3,

maxZoom: 18,

mapWidth: size.x,

mapHeight: size.y,

markers: markersList

};

}

Для того, чтобы отслеживать её изменения, нужно сделать так:

var scope = $rootScope.$new(true);
scope.$watch(function (scope) { return getParams();}, function () {
	// do anything. for instance:
	// $rootScope.$broadcast('params_changed');
}, true);

var scope = $rootScope.$new(true);

scope.$watch(function (scope) { return getParams();}, function () {

// do anything. for instance:

// $rootScope.$broadcast('params_changed');

}, true);

Продолжить чтение: http://www.bennadel.com/blog/2658-using-scope-watch-to-watch-functions-in-angularjs.htm

Работа с консолью в разных браузерах

http://habrahabr.ru/post/253359/ https://github.com/spmbt/jsConsoleApiReference

Spy-js — плагин к PhpStorm для профилирования js

http://spy-js.com/ http://www.youtube.com/watch?v=vPIbwxzC5cU

Chrome Fullscreen API

Всё сводится к вызову:

function launchIntoFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

function launchIntoFullscreen(element) {

if(element.requestFullscreen) {

element.requestFullscreen();

} else if(element.mozRequestFullScreen) {

element.mozRequestFullScreen();

} else if(element.webkitRequestFullscreen) {

element.webkitRequestFullscreen();

} else if(element.msRequestFullscreen) {

element.msRequestFullscreen();

}

Но при этом есть нюанс использования: включить полноэкранный режим можно только в ответ на действие пользователя. http://davidwalsh.name/fullscreen http://stackoverflow.com/questions/7836204/chrome-fullscreen-api