Best practices клиентской оптимизации от Yahoo!

http://developer.yahoo.com/performance/rules.html

Сниппеты для Google Chrome DevTools

https://github.com/bgrins/devtools-snippets#to-enable-devtools-snippets-in-chrome

Введение в node.js

Что-то вроде «Dive into python», только для node.js. https://github.com/maxogden/art-of-node

Что нового в Google Chrome DevTools в 2013

http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/

Вопросы на собеседование front-end разработчику

https://github.com/darcyclarke/Front-end-Developer-Interview-Questions

npmsearch — поиск пакетов npm

http://npmsearch.com/

Счётчик от Google Analytics в приложении AngularJS

index.html

<script type="text/javascript">
	// TODO for mamba.ru only
	var _gaq = _gaq || [];
	_gaq.push(['_setAccount', 'UA-...']);
	_gaq.push(['_setDomainName', '...']);

	(function ()
	{
		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(ga, s);
	})();
</script>

// TODO for mamba.ru only

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-...']);

_gaq.push(['_setDomainName', '...']);

(function ()

{

var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(ga, s);

})();

</script>

app.js

var app = angular.module('my', []).config();
app.run(['$location', function($location) {
	$rootScope.$on('$locationChangeSuccess', function(e, next, current) {
		trackPageView();
	});
	function trackPageView()
	{
		if (window._gaq)
		{
			// it's optional
			window._gaq.push(['_setCustomVar',
				1, // This custom var is set to slot #1.  Required parameter.
				'site_version', // The name acts as a kind of category for the user activity.  Required parameter.
				'my' // This value of the custom variable.  Required parameter.
			]);

			window._gaq.push(['_trackPageview'], $location.url());
		}
	}
}]);

var app = angular.module('my', []).config();

app.run(['$location', function($location) {

$rootScope.$on('$locationChangeSuccess', function(e, next, current) {

trackPageView();

});

function trackPageView()

{

if (window._gaq)

{

// it's optional

window._gaq.push(['_setCustomVar',

1, // This custom var is set to slot #1. Required parameter.

'site_version', // The name acts as a kind of category for the user activity. Required parameter.

'my' // This value of the custom variable. Required parameter.

]);

window._gaq.push(['_trackPageview'], $location.url());

}

}]);

https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingCustomVariables http://davidwalsh.name/ajax-analytics

Отладка страниц на Google Chrome for Android

https://developers.google.com/chrome-developer-tools/docs/remote-debugging?hl=ru Вот только в помощь, как включить режм разработчика на Android 4.2+ — http://zacktutorials.blogspot.ru/2013/03/enabling-developer-options-in-android.html Репозиторий с плагином — https://github.com/GoogleChrome/ADBPlugin Можно пробросить порты — https://developers.google.com/chrome-developer-tools/docs/remote-debugging?hl=ru#reverse-port-forwarding

Список обработчиков событий для элемента в Google Chrome DevTools

Правой кнопкой на элементе → Проверить элемент → Event Listeners в правом меню. Правой кнопкой на функции → Show Function Definition. https://plus.google.com/+AddyOsmani/posts/9WvgE2K2QTF Один большой минус — бесполезен для фреймвоков типа jQuery или AngularJS: показывает функцию, которая непосредственно навешивает событие, т.е. пользы — ноль.

Google Chrome Dev Tools: изменение и сохранение js и css на лету

Для этого нужен Chrome Canary. Консоль → настройки → Workspace → Add folder После этого в консоли, во вкладке Sources, можно редактировать и сохранять js-файлы (страница будет работать с уже обновлённым js, он подменяется на лету, без перезагрузки страницы). Вот инструкция с картинками — https://plus.google.com/+AddyOsmani/posts/CYXzDfg3jhC, вот видео — https://www.youtube.com/watch?v=kVSo4buDAEE. Работает также с css-файлами. Есть даже …