Olá caros leitores, no post de hoje falaremos sobre “Code Snippets” em tradução livre “Trechos de Código”, um conceito que vem crescendo bastante à medida que o mercado exige mais agilidade e rapidez de seus funcionários.

No ultimo post falei um pouco sobre o que aconteceu no “Workshop Front-End Egineering em Escala Global” realizado no ultimo dia 15 de Janeiro em Recife – PE, pois bem, seguindo o conselho do mestre Berg Brandt, Front-End da Yahoo, estudei a fundo as técnicas empregadas com esse sistema de desenvolvimento e tive algumas oportunidades de colocá-las em pratica, e durante minha escalada em busca de mais conteúdo relacionado ao assunto fui apresentado ao “Css-Tricks.com/Snippets”, um repositório repleto de códigos de uso comum entre desenvolvedores e programadores web, que pelo menos para mim esta sendo um prato cheiro.

O site dispõe de centenas de trechos de códigos organizados por categorias:

• CSS
• HTAccess
• HTML
• JavaScript
• jQuery
• PHP
• WordPress

Este magnífico repositório conta com desde códigos como a “Estrutura simples de um documento XHTML Strict” ate “Efeitos de Acordeom” usando jQuery, confira alguns exemplos:

CSS Snippets – PNG Hack/Fix para IE6

Background-images

.yourselector {

width:200px;

height:100px;

background: url(/folder/yourimage.png) no-repeat;

_background:none;

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’/folder/yourimage.png’,sizingMethod=’crop’);

}

Inline images

img, .png {

position: relative;

behavior: expression((this.runtimeStyle.behavior=”none”)&&(this.pngSet?this.pngSet=true:(this.nodeName == “IMG” && this.src.toLowerCase().indexOf(‘.png’)>-1?(this.runtimeStyle.backgroundImage = “none”,

this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + this.src + “‘, sizingMethod=’image’)”,

this.src = “images/transparent.gif”):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace(‘url(“‘,”).replace(‘”)’,”),

this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + this.origBg + “‘, sizingMethod=’crop’)”,

this.runtimeStyle.backgroundImage = “none”)),this.pngSet=true));

}

jQuery Snippets – Fixing IE z-index

Com jQuery

$(function() {

var zIndexNumber = 1000;

// Put your target element(s) in the selector below!

$(“div”).each(function() {

$(this).css(‘zIndex’, zIndexNumber);

zIndexNumber -= 10;

});

});

Com MoonTools

if(Browser.Engine.trident){

var zIndexNumber = 1000;

// Put your target element(s) in the selector below!

$$(‘div’).each(function(el,i){

el.setStyle(‘z-index’,zIndexNumber);

zIndexNumber -= 10;

});

};

Esses são apenas dois exemplos de Code Snippets, como eu disse antes dentro do site você encontrará diversos outros códigos que com certeza serão de grande ajuda em seus projetos, pois você irá economizar grande parte de seu tempo simplesmente reciclando o código.

Espero que gostem da dica e aproveitem bastante esse site, pois isso é conteúdo raro e dificilmente você encontrará algo parecido e grátis. Um Abraço!

Endereço: http://css-tricks.com/snippets/
Criador: Chris Coyer

A melhor maneira de exibir em seu blog ou site o último tweet postado por você. É usando jQuery: Simples, rápido e pratico, Veja.

1º passo – Criar uma div:

Crie uma <div> com um ID (Identificador) chamado ‘tweet’, ou como você preferir chamar e coloque no lugar que desejar.

<div id=”tweet”> … </div>

2º passo – Incorpore o jQuery a seu código:

Já que estamos trabalhando com jQuery, é preciso incorporar a biblioteca ao seu documento. Para fazer isso é muito simples, basta inserir a linha de código a seguir em sua ‘head’.

<script src=”http://code.jquery.com/jquery-latest.min.js”></script>

3º passo – Mostrar o tweet na tela:

Para que isso aconteça, é preciso inserir o código abaixo em sua ‘head’ para que a div ‘tweet’ possa ser valida. Lembre-se, troque ‘usuario’ por seu ID no Twitter (ex: war10ck_ti ou maujor).

<script>

$(‘document’).ready(function() {

$.getJSON(‘http://twitter.com/statuses/user_timeline/usuario.json?callback=?’, function(data) {

$(‘#tweet’).html(data[0].text);

});

});

</script>

Caso prefira, você também por inserir este código em um arquivo separado, e incorpora-lo a página desejada. Para estilizar o ‘widget’ da forma que você desejar, basta ultilizar Folhas de Estilo em Cascata, as CSS. Assim personalizando, cores, fontes, espaçamentos, margens e etc.

Veja um exemplo: Mostrar último tweet

Foi lançada oficialmente a 2ª edição do 3º livro do Maujor,  jQuery – A Biblioteca do Programador Javascript, esta versão vem bem mais recheada e atualizada com as novas recomendações da biblioteca, a jQuery 1.4.2. Quem gostou da primeira edição certamente não terá uma reação diferente. O livro já pode ser adiquirido através da loja virtual da Novatec Editora e nas melhores livrarias do Brasil. Maiores informações podem ser obtidas pelo site oficial do livro: www.livrojquery.com.br.

Livro do Maujor

Hoje falarei sobre um dos lançamentos mais esperados do ano pelo menos no mundo dos desenvolvedores e entusiastas, ou seja o Livro Ajax com jQuery do Maujor.
Foi lançado no ultimo dia 27 de julho do corrente ano o quarto livro do ilustre Maurício Samy Silva, Maujor ou Dinossauro das CSS assim é conhecido no mundo da internet, como o propio titulo diz o livro se trata de uma verdadeira enciclopédia dessas duas linguagens web, o jQuery e o Ajax que ambos são combinações de outras linguagens bastante conhecidas e utilizadas pelos desenvolvedores atualmente.
Esta edição assim como as outras foi lançado pela Editora Novatec e já esta disponível para venda em diversas lojas online e também nas melhores livrarias de todo o pais, você desenvolvedor não perca esta chance e adquira já o seu com desconto de 25% na Loja Virtual da Editora Novatec ate o dia 31 de agosto, para ter esta regalia no momento da compra informe o código “TWITTER”, aproveite essa chance e ate a próxima gente! Abraço.