sergiolopes

// ----
// libsass (v3.2.5)
// ----

h1 {
  font-size: 1em;
  
  @media (min-width: 600px) {
    font-size: 2em;
  }

sergiolopes

for i in */*.MP4; do
 echo "$i " 
 date=$(exiftool "$i"|grep "Create Date" | head -n 1|cut -b35-|sed -e 's/\:[0-9][0-9]$//g;s/://g;s/ //g')
 touch -t "$date" "$i"
done

for i in */*.MTS; do
  echo "$i " ;
  date=$(exiftool "$i"|grep Original|cut -b35-|sed -e 's/\:[0-9][0-9]\+.*//g;s/://g;s/ //g');
  touch -t "$date" "$i"; 

sergiolopes

/**
	
	Export a lot of PNG files from your cool HTML5 presentation.
	(requires PhantomJS)

	Created by Sérgio Lopes - http://sergiolopes.org/

 */
(function(){

sergiolopes

My technical notes/suggestions about the Viewport chapter on ppk's amazing mobile web book:

1. About Media Queries, in the Syntatic Notes section there is: "all media queries require a media type". It's true, a media type is always applied, but the spec allows you to omit it if it's all and. In http://www.w3.org/TR/css3-mediaqueries/#media0 right above the Example 5, it says: "A shorthand syntax is offered for media queries that apply to all media types; the keyword ‘all’ can be left out (along with the trailing ‘and’). I.e. if the media type is not explicitly given it is ‘all’." So we can just use @media (min-width: 200px){} and I think that's the syntax that should be preferred.

2. About ems in media queries. It misses the main point why em media queries became famous in the first place: page zoom on Desktop WebKit browsers didn't work with px media queries. That is, WebKit had a bug and didn't recalculate the media queries when page zoom was applied (it was like the 'px' in media quer

sergiolopes

Quer aprender a tocar violão?

Não é a toa que o violão é instrumento popular. Fácil de tocar em todos os lugares, divertido para acompanhar uma roda de amigos, e não exige um grande investimento. Para tocar, basta vontade, dedicação e um bom professor.

Acabamos de colocar no ar o curso Primeiros passos com Violão disponível já para todos assinantes. Aprenda as principais posições e batidas para sair tocando diversas músicas! Aprenda também como nomear acordes, numerar casas e cordas, a diferença entre acordes maiores e menores, seu primeiro dedilhado e muito mais!

O novo curso faz parte da assinatura ilimitada da MusicDot. Com uma mensalidade de só R$ 49 você acessa todos os cursos, exercícios práticos, playbacks de músicas, cifras, partituras e tira dúvidas com professor. Se ainda não é aluno, assine agora!

Cursos online de violão e guitarra

sergiolopes

Cursos online de música. Aprenda teclado e piano online. Aulas online com professores experientes, exercícios práticos, playbacks exclusivos de músicas, partituras, cifras e tira dúvidas com professor.

Assinatura mensal ilimitada dá acesso a todo conteúdo. No futuro, até violão e guitarra.

Cursos online de teclado e piano MusicDot.

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",

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

// 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

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