sergiolopes

function autogrow(textarea) {
	
	// create fake div with same content
	// (only works with box-sizing border-box)
	var dv = document.createElement("div");
	dv.className = 'fm-growable';
	dv.style.visibility="hidden";
	dv.style.position="absolute";
	textarea.parentNode.appendChild(dv);
	

sergiolopes

SVG sprite generator, by Sérgio Lopes

• https://twitter.com/sergio_caelum
• http://sergiolopes.org

Requirements

• Python
• Inkscape (on command line path)
• ImageMagick

sergiolopes

function load(url) {
  var scripts = document.getElementsByTagName('script')[0]
  var script = document.createElement('script');
  script.async = true;
  script.src = url;
  scripts.parentNode.insertBefore(script, scripts);
}
load('//apis.google.com/js/plusone.js');
load('//platform.twitter.com/widgets.js');
load('//s.widgetsite.com/widget.js');

sergiolopes

javascript:document.querySelector('meta[name=viewport]').setAttribute('content','width=device-width,initial-scale=1,maximum-scale=10,user-zoom=yes');

sergiolopes

<script>document.documentElement.className = 'js '+ (!!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', "svg").createSVGRect ? 'svg':'nosvg')</script>

sergiolopes

    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "http://connect.facebook.net/pt_BR/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

sergiolopes

Observe as imagens nesse gist e compare visualmente o resultado de várias compressões lossy diminuindo o número de cores.

• a-PNG32-original-inkscape.png - 11425 bytes
• b-PNG-grayscale.png - 8027 bytes
• c-PNG8-256cores.png - 5308 bytes - PNG8 com palheta de 256 cores
• d-PNG8-128cores.png - 4518 bytes - PNG8 com palheta de 128 cores
• e-PNG8-32cores.png - 3327 bytes - PNG8 com palheta de 32 cores
• f-PNG8-12cores.png - 2403 bytes - PNG8 com palheta de 12 cores

sergiolopes

// funcionalidade de trackear a seção scrollada no #hash da URL
define(['fw/Query', 'domready'], function(Q){

	// helper fn:
	// observa scroll e resize e rotate mas com limite de rate.
	function onSmoothScroll(callback, interval) {
		var timer = undefined;
		Q(window).on('scroll, resize, rotationchange', function () {
			timer && clearTimeout(timer);
			timer = setTimeout(callback, interval);

sergiolopes

<canvas width=300 height=300 style="display:none"></canvas>

<h4>Original</h4>
<img class="original" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png">
    
<h4>90 graus</h4>
<img class="rotate90">
    
<h4>180 graus</h4>
<img class="rotate180">

sergiolopes

{
  "vars": {
    "@gray-darker": "lighten(#000, 13.5%)",
    "@gray-dark": "lighten(#000, 20%)",
    "@gray": "lighten(#000, 33.5%)",
    "@gray-light": "lighten(#000, 60%)",
    "@gray-lighter": "lighten(#000, 93.5%)",
    "@brand-primary": "#428bca",
    "@brand-success": "#5cb85c",
    "@brand-info": "#5bc0de",