Dica do Dia: CSS Gradient Generator

Bom dia nobres senhores e senhoras.

Hoje, venho ao presente blog, repassar um site muito interessante e prático que estava em meus Bookmarks e eu não lembrava até precisar.

Se bem que minha memória nunca lembra de nada mesmo. Aliás, meus recentes problemas de memória (não tão recentes) estavam me deixando preocupado. Eu já havia ido até em neurologista, o qual me pediu um exame de ressonância magnética, do qual eu pulei fora (espero que este meu português cheio de "o qual" e "do qual" esteja correto, afinal estudei orações subordinadas ontem haha).

(Voltando ao assunto secundário do post: ) Porém minhas preocupações passaram quando vi que todos meus amigos que "mexem" com computador o dia inteiro também estavam assim e também após ler uma reportagem na Revista Época dizendo que a internet está sacaneando nossos cérebros. Concordei e fiquei aliviado por, de certa forma, eu ainda ser "normal". Aliás, maldita Ed. Globo que fica renovando as assinaturas sem solicitação.

Qual era o assunto inicial do post mesmo? Ah, CSS Gradient Generator. Desculpem a divagação anterior mas pelo menos serviu pra deixar o post com mais de 1 parágrafo haha.

Agora, pra não tomar muito do seu tempo, serei rápido e deixarei que tire suas próprias conclusões: O Gradiente dos botões deste site foi feito em 30 segundos (e sem imagens de certa forma) graças a este site.

Pra você não precisar abrir link externo, deixo aqui o exemplo:

Sou uma div com
gradiente CSS

Pode me agradecer ou xingar nos comentários.

Selects Multiple NÃO! Checkboxes SIM! Uma campanha pela abolição de selects multiples

Sabe, eu nunca tinha parado pra pensar sobre isso.

Selects multiples são muito chatos.
Chatos pro visitante - que tem que usar o shift pra escolher mais de um (que visitante sabe fazer isso?)
Chatos pro desenvolvedor - na hora do html e na hora de tratar os dados no server-side (php, asp, etc).
Chatos pra estilizar o visual - Alterar visual CSS de selects é quase impossível.

Quantas vezes já vimos formulários assim:

Escolha as cidades de destino (pressione shift ou control para escolher mais de uma):
Goiânia Palmas Fortaleza São Paulo Salvador

O povão gosta de mouse. O povão não gosta de teclado. O povão lá sabe o que é shift ou control?

Se quer uma página acessível não é melhor fazer assim?

Escolha as cidades de destino:

Goiânia
Palmas
Fortaleza
São Paulo
Salvador

É mais bonito ou não é? É mais fácil pro visitante ou não é?

Olha só como o código é simples:

<style>
/* coloque este estilo em seu arquivo css */
.check-select-multiple {border: 2px inset #DDD; background: white; height: 60px; overflow-y: scroll; width: 300px;}</style>
<div class="check-select-multiple">
<label><input name="cidades" type="checkbox" value="1" />Goiânia</label>
<label><input name="cidades" type="checkbox" value="2" />Palmas</label>
<label><input name="cidades" type="checkbox" value="3" />Fortaleza</label>
<label><input name="cidades" type="checkbox" value="4" />São Paulo</label>
<label><input name="cidades" type="checkbox" value="5" />Salvador</label>
</div>

Veja que não precisamos fazer malabarismos com javascripts nem plugins pra Jquery. É só usar a simplicidade do belo HTML+CSS.

Além da facilidade pro visitante, ainda é infinitamente mais fácil estilizar uma DIV do que estilizar um Select (principalmente nos IEs da vida).

Se você gostou da minha explanação, abrace esta campanha também. Diga adeus ao select-multiple.
Faça um link para esta campanha, compartilhe no twitter, facebook, google-plus, faça bandeiras, passeatas, greve de fome...

Amém.

QuerySelector ou CSSQuery para IE 6 e 7 (e outros navegadores antigos)

Nobres colegas scripteiros, no maravilhoso mundo da programação, a cada dia a gente se surpreende.

Ontem, durante a programação do Mwords, eu procurava um script de CSSQuery para poder permitir que os usuários do Mwords, escolhessem o elemento alvo com base em seletores CSS. Exemplo: alvo = '#content .post p'.

Lindo né? Assim como no jQuery e outras libs por aí.

As versões que eu achei eram gigantescas (mais de 10k) e a mais recomendada era a do Dean Edwards.
Nunca que eu iria pesar o script do Mwords com 10k só pra ter uma funcionalidadezinha dessas a mais.

Além disso, a maioria dos navegadores modernos já suporta a document.querySelectorAll que permite fazer isso.
O único problemático (pra variar) é o IE (acho que do 8 pra baixo).

Não desisti da minha busca, e acabei encontrando esta pérola da gambiarra feita pelo pessoal do Ajaxian. Funciona maravilhosamente bem e é maravilhosamente pequeno. Um achado digno de glórias ao pessoal do Ajaxian.

Rapidamente adaptei na minha lib, pra usar isto, caso o navegador não suporte a document.querySelectorAll.

Vejam como ficou:

cssQuery = function(sel){ //document.querySelector. sel é o seletor CSS
  //by Micox - http://elmicox.blogspot.com
  var i, res, dqs, d=document;
  if (d.querySelectorAll){
    return d.querySelectorAll(sel);
  }else{ //o IE8 pra baixo e FF 3.5 pra baixo não tem querySelector
    //baseado no fudido script de querySelector do ajaxian http://ajaxian.com/archives/creating-a-queryselector-for-ie-that-runs-at-native-speed
    var head = d.documentElement.firstChild;
    var styleTag = d.createElement("STYLE");
    head.appendChild(styleTag);
    dqs = d.__qsResult = [];

    styleTag.styleSheet.cssText = sel + "{x:expression(document.__qsResult.push(this))}";
    window.scrollBy(0, 0);
    head.removeChild(styleTag);

    res = [];
    for (i in dqs){if (dqs.hasOwnProperty(i)) {
      res.push(dqs[i]);
    }}
    return res;
    }
}
//como usar
var todos_p_destaque_filhos_de_content = cssQuery('#content p.destaque');

Obs.1: Não quis mexer com o prototype do "document" porque uso isso dentro de uma lib minha e iria ficar melhor pra mim assim. Você pode adaptá-la e postar nos comentários se quiser.

Obs.2: Só irá funcionar com seletores NATIVOS do navegador em que estiver. Portanto se for usar um "div>p.classetal" no IE, provavelmente não irá funcionar.

Pequena explicação sobre o truque deste CSSQuery:

1. Primeiro testo se o querySelectorAll existe no navegador atual (aquele primeiro if). Se existe, então uso ele.
2. Se não existe, irei adicionar um "style" ao documento.
3. O conteúdo deste style usa expressions - uma funcionalidade de CSS exclusiva do Internet Explorer que permite embutir scripts dentro das folhas de estilo. Você já deve conhecê-la caso já tenha usado meu velho Ultimate menu drop-down, onde uso expressions pra simular o :hover no IE.
4. O que foi escrito dentro do style embutido (cssText) é a criação de uma regra onde o seletor é o parametro "sel" passado (o caminho do elemento). 
5. Dentro da regra, eu pego o próprio elemento encontrato (this) e adiciono em uma variável __qsResult.
6. Simples não? Genial.

(Pra quem quiser ver um exemplo do novo Mwords em funcionamento, olhem este site).

Até mais.

Alternativa melhor ao typeOf em Javascript

Opa,

Um textinho rápido que li neste link do Angus Croll e que merece ser replicado: Uma alternativa bem melhor ao velho typeOf em javascript.

O typeOf, é um método nativo de Javascript pra retornar o tipo da variável. Assim temos:

typeof "belladonna" //"string"

typeof (2) //"number"
typeof ("a", 3) //"number"
typeof (1 + 1) //"number"

var a;
typeof a; //"undefined"
typeof b; //"undefined"
alert(a); //undefined
alert(b); //ReferenceError

typeof NaN //"number"

typeof {a: 4}; //"object"
typeof [1, 2, 3]; //"object"
typeof null //"object"
typeof new ReferenceError; //"object"
typeof new Date; //"object"
typeof /a-z/; //"object"
typeof Math; //"object"
typeof JSON; //"object"
typeof new Number(4); //"object"
typeof new String("abc"); //"object"
typeof new Boolean(true); //"object"
(function() {console.log(typeof arguments)})(); //object

Bom, olhando os exemplos acima a gente vê que, apesar de útil e muito usado, ele não retorna detalhadamente o que a gente precisa.

A solução? Eu, pessoalmente, sempre usei uma verificação envolvendo a propriedade "prototype" que toda variável tem.

O Angus fez melhor e empacotou em uma função:

var toType = function(obj) {
  return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
}

Comparando com os "object" do typeof padrão teremos as seguintes diferenças:

toType ("a", 3); //"string"
toType({a: 4}); //"object"
toType(null); //"null"
toType([1, 2, 3]); //"array"
(function() {console.log(toType(arguments))})(); //arguments
toType(new ReferenceError); //"error"
toType(new Date); //"date"
toType(/a-z/); //"regexp"
toType(Math); //"math"
toType(JSON); //"json"
toType(new Number(4)); //"number"
toType(new String("abc")); //"string"
toType(new Boolean(true)); //"boolean"

O resto (string, number, undefined) é igual. Só não pode ser usado em variáveis vazias não declaradas, senão dará um "ReferenceError" assim como um alert em algo não declarado.

Gostou?