Gustavo Martusewicz gustavom

#BrazilJS 2014

Talks: slides & Links

Day	Talk	Speaker	Links
1	Why ServiceWorker may be the next big thing	Renato Mangini	interview · slides · video
1	Frontend at Scale - The Tumblr Story	Chris Miller	interview · slides · video
1	Intro to GFX: Raw WebGL	Nick Desaulniers	interview · slides · video

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

Screencapture and animated gifs

I say "animated gif" but in reality I think it's irresponsible to be serving "real" GIF files to people now. You should be serving gfy's, gifv's, webm, mp4s, whatever. They're a fraction of the filesize making it easier for you to deliver high fidelity, full color animation very quickly, especially on bad mobile connections. (But I suppose if you're just doing this for small audiences (like bug reporting), then LICEcap is a good solution).

Capturing (Easy)

Launch quicktime player
do Screen recording

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

~~Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.~~

Métodos de iteração de Array

Adaptação do fork: (https://gist.github.com/ljharb/58faf1cfcb4e6808f74aae4ef7944cff)

Ao tentar explicar como o Javascript usa seu métodos para arrays, acabei reunindo esses conceitos. Espero que Seja util. Ficarei feliz com qualquer sugestão.

Introdução

O Objet Array no Javascript tem muitos métodos construidos no seu prototype. Alguns deles modificam o proprio array passado. Felizmente, a maioria não, eles retonar um novo array inteiramente distinto. Uma vez que arrays são conceitualmente uma lista de itens, ajuda na clareza do código e sua manutenção a ponto de ser capas de operar de uma forma mais "funcional" . (Eu insisto em refrenciar um array como uma "Lista" - embora em algumas linguaguens de programação, Lista é um tipo de dado nativo, mais em JS e nesse POST, estou me referindo ao conceito. Em todos os lugares que eu usar a palavra "lista" você pode assumir que eu estou falando de JS Array) Isso siginifica, para a execução de uma simples operação na Lista como um

	function monitorEvents(element) {
	var log = function(e) { console.log(e);};
	var events = [];

	for(var i in element) {
	if(i.startsWith("on")) events.push(i.substr(2));
	}
	events.forEach(function(eventName) {
	element.addEventListener(eventName, log);
	});

	console.log(1);
	(_ => console.log(2))();
	eval('console.log(3);');
	console.log.call(null, 4);
	console.log.apply(null, [5]);
	new Function('console.log(6)')();
	Reflect.apply(console.log, null, [7])
	Reflect.construct(function(){console.log(8)}, []);
	Function.prototype.apply.call(console.log, null, [9]);
	Function.prototype.call.call(console.log, null, 10);

	preferred_syntax = :sass
	http_path = '/'
	css_dir = 'assets/stylesheets'
	sass_dir = 'assets/sass'
	images_dir = 'assets/images'
	javascripts_dir = 'assets/javascripts'
	relative_assets = true
	line_comments = true
	# output_style = :compressed

	$menu = menu_navigation_links('menu-your-custom-menu-name');
	print theme('links__menu_your_custom_menu_name', array('links' => $menu));