Customização de CSS com Compass

Trabalhar com componetização do HTML e CSS significa mais qualidade no código e muito mais produtividade no longo prazo.

Já escrevi algumas vezes aqui sobre este assunto, um dos que causaram bastante debate foi sobre CSS orientato a objetos – mais debate pela nomenclatura do que pela metodologia em si.

Este ano tive o prazer de palestrar no Front in Sampa 2013 e falei um pouco sobre componetização de HTML e CSS utilizando o Compass, uma ferramenta extraordinária que vale a pena ser estudada.

A popularização de frameworks como o Bootstrap tornaram mais fácil este tipo de metologia, pois já temos a segmentação da estrutura e trabalhar com a customização visual dos componentes fica bem mais fácil. Aproveitar este conhecimento de arquitetura de front-end destes projetos e trazer para dentro da sua empresa pode ajudar muito na produtividade da equipe.

Abaixo os slides da minha apresentação sobre este assunto:

[slideshare id=28678434&doc=componetizacaodecsscomcompass-131127102153-phpapp02]

E aí, vamos componetizar?

jQuery.when() – executar função depois de vários carregamentos ajax

Estou desenvolvendo um projeto para um cliente da GS Solutions onde um template será montado dinâmicamente no front-end através do consumo de vários JSONS.

Em um caso específico eu preciso gerar uma lista (array) de jogos, que estão divididos em 3 arquivos JSON diferentes e uma rotina deve ser executada depois desta lista populada. 

Como fazer isso de forma assíncrona após o carregamento dos 3 arquivos por ajax?

jQuery.when()

A função when do jquery permite que você execute um callback após uma série de ações terem sidos realizadas, como o carregamento assíncrono de quantas URLs você precisar.

Exemplo

Quero carregar jogos-1.json e jogos-2.json, percorrer os elementos de cada uma delas e adicionar em um array. Feito isso, quero percorrer este array e imprimir os resultados.

var jogos = [];
$.when(
	$.getJSON('jogos-1.json'),
	$.getJSON('jogos-2.json')
).done(function(jogos1,jogos2){
	/* Será executado somente após as 2 requisições ajax serem carregadas
	Aqui você poderia manipular os dados (jogos1 e jogos2),
	fazer merge dos objetos, ordenar, etc. */
	for (var jogo in jogos1){ jogos.push(jogo) }
	for (var jogo in jogos2){ jogos.push(jogo) }
});

Um exemplo bem simples mas que exemplifica uma forma eficiente de fazer o carregamento assíncrono mesmo quando nós precisamos de todos os request completos antes de executar o callback.

Você pode adicionar quantos eventos forem necessários como parâmetros na função when e deve adicionar o mesmo número de parâmetros na função dentro do done, cada parâmetro representa um resultado do when.

Tem mais dicas? Escreva nos comentários!

Frontinsampa 2013

Já está sabendo do Frontinsampa 2013? Estamos apoiando o evento este ano, que vai ser imperdível por diversos motivos, entre eles quero destacar dois:

Lea Verou

Isso mesmo! A Lea (ou se você prefer formalidade, Michaelia Komvouti-Verou) trabalha no W3C e vai dar o ar da graça, palestra internacional no evento! Dando uma olhada nos projetos dela dá para ter idéia de que a palestra será sensacional.

Inferno

Se você tem alguma dúvida de que o Frontinsampa poderia ser “só mais um evento de front-end”, esta dúvida acaba agora: o evento vai acontecer no Inferno, uma casa noturna que fica na Rua Augusta, aqui em São Paulo. A casa será adaptada para o dia do evento e contará com toda a infraestrutura que o evento exige!

FrontinSampa

Quando: 14 de Setembro
Onde: Inferno (Rua Augusta), São Paulo SP
Quanto: R$200,00 (R$175,00 se você usar nosso cupom de desconto!)


Cupom de desconto

Como alguns de vocês sabem, eu sou sócio do Eu Compraria! e nós estamos apoiando o evento, estaremos lá com vários produtos!

De quebra a organização liberou um cupom de desconto (no valor de R$25,00), faça agora sua inscrição utilizando o cupom: EUCOMPRARIA-25 


Vamos lá aprender e discutir front-end e tomar uma cerveja depois? 😀

Javascript Rock

O  Dmitry Baranovskiy's escreveu um RAP do Javascript e John Fawcett fez esta maravilhosa obra de transformar a letra em rock!

Tomei a liberdade de traduzir a letra para o português, fiquem a vontade para sugerir melhorias na tradução.

Letra – Javasript Rock

You code in JS, but you mixing the types
And always forget the syntax for "splice".
To type "double equal" is like rolling the dice
And you scared to death … of prototypes

Você programa em JS mas você mistura os tipos
E você sempre esquece a sintaxe do splice
Escrever "igual igual" é como jogar dados
E você morre de medo de usar prototype


It's time to stand up and get some respect,
Just go to ECMA and start reading spec.
Unpuzzle, unlock it, uncode and decrypt
And gain yourself power of true JavaScript

É hora e levantar e ganhar algum respeito
Vá para o ECMA e comece a ler as especificações
Desembaralhe, desbloqueie, uncode e decodifique
E ganhe você mesmo o poder do verdadeiro Javascript

You add number to string and string to array
Divide it by object (you know it's ok)
The prototype chain you can see through the code…
It was a great journey from Netscape to Node.

Você adiciona número a string e string ao array
Divide por um objeto (você sabe que está ok)
Com o prototype você pode ver todo o código
Foi uma grande jornada do Netscape ao Node

 

O vídeo foi dica do grande Clécio no Facebook.

Se você gosta de músicas falando de tecnologia precisa conhecer o SEO RAP.

Uso de Web Workers para highlight de palavras

Por uma necessidade no trabalho (como na imensa maioria das vezes), comecei a pesquisar o uso de Web Workers. A necessidade? Criar um highlight de palavras em textos no html, via javascript.

Fiz um teste sem o uso de web workers, onde pegava o texto de uma div e iterando em uma lista de palavras-chaves, usando RegExp trocava a palavra-chave por . A performance foi lastimável, com 60 palavras-chaves em um texto longo (5 parágrafos gerados pelo CupCake Lipsum) a média era de 600 milisegundos.

Alterei para usar Web Workers, e criei um task.js

onmessage = function(e) {
    var html = e.data[0];
    for(var i=0; i
        var reg = new RegExp(e.data[1][i], 'gi');
        html = html.replace(reg, "" + e.data[1][i] + "");
    }
    postMessage(html);
}

O funcionamento é simples: onmessage recebe e (é um event), que possui e.data
Esse é um array (na chamada da função onmessage ficará mais claro) que possui na primeira posição o texto a ser analisado e na segunda, a lista de palavras-chaves.
A partir daí, só é necessário iterar na lista de palavras-chaves e com RegExp, trocar as ocorrências da mesma por um span com a palavra-chave no meio. No caso, coloquei uma class para poder estilizar.

O html é simples. Declaro a lista de palavras-chaves (chamei de wikis), instancio um novo Worker (que está no task.js). Com worker.postMessage(data), posso passar dados para o worker. Ali, está o array ao qual me referi.
O callback do onmessage recebe event, que também possui um data. No caso, é o texto com os spans inseridos "em volta" das palavras-chaves.

javascript

window.onload = function() {
    var div = document.getElementById("text");
    var wikis = [
        "brownie",
        "lemon",
        "chocolate",
        "sesame",
        "lollipop",
        "oat",
        "cake",
        "gingerbread",
        "sweet",
        "applicake",
        "apple",
        "chups"
    ];

    var worker = new Worker('task.js');
    
    worker.onmessage = function (event) {
        var d = event.data;
        div.innerHTML = d;
    }
    worker.postMessage([div.innerHTML, wikis]);

}

CSS

span.wiki {
   border-bottom:1px dotted #FF0000;
}

No html, crie uma div de id="text" com o texto que será verificado.

Para testar, crie o task.js com o primeiro trecho e um .html com o javascript  e css no head e a marcação html adequada.
Demo: http://www.chrisb.com.br/labs/webworker/words.html