[Vídeo]: Aprenda jQuery com um gênio

jQuery

Tinha visto isto no Pinceladas na Web tempos atrás, me assustou

Este vídeo foi feito numa conferência do Google, em abril deste ano. Dmitri Gaskin é contribuidor assíduo do projeto Drupal (não sou muito fã desta CMS), mas o interessante que ele tem apenas 12 anos. O_O’

John Resig, o inventor do jQuery, tem 24 anos, a criança tem a metade a idade sai pelo mundo dando palestras e workshops pelo mundo, inclusive esta que ele demonstra TOTAL conhecimendo no framework.

Ou seja, eu e você somos fracassados, se comparado a ele, estude para pelo menos não fazer feio quando desenvolver.

[Programação]:Carregando Javascript/CSS dinamicamente com jQuery [Revisitado]

Estes tempos estava eu apanhando aqui para umas chamas dinâmicas em Ajax para um componente de banners para um cliente aqui da empresa.

Lendo atentamente a documentação do jQuery, na parte de Ajax, me deparei com a seguinte função:

jQuery.getScript( url, callback ) - Returns: XMLHttpRequest
Loads, and executes, a local JavaScript file using an HTTP GET request.

Nossa, existia uma função pronta para carregamento de Javascript no framework e eu nem tinha notado? Antes da versão 1.2.6, eu inseria via DOM o script conforme função mostrada num outro artigo aqui:

function loadScript(src) {
          $("head").append(
                     $(document.createElement("script"))
                           .attr({
                                   type: "text/javascript",
                                   src: src + "?_" + parseInt((Math.random()*1000000))
                            })
                    )
}

A partir da versão 1.2.6 descobri que a mesma função estava fazendo uma chamada via Ajax, olhei o código-fonte e notei que tinha um condicional caso o que eu queria inserir via DOM era <script>, fazia uma chamada, pegava o resultado e dae sim injetava via DOM. Nada mais é do que a função descoberta na documentação do jQuery, mas feita de um jeito escroto de minha parte.

Eis então minha nova versão para a função de carregamento de scripts no HTML:

function loadScript(src, callback) {
	$.getScript(src, callback || null);
}

Mais simples que a anterior e utilizando a forma certa do jQuery. Caso optem, podem omitir o callback e executarem as funções requeridas depois da chamada da função, só tomar cuidado para que o Ajax seja o mais rápido possivel para não dar erro nas funções.

[Video]: Into jQuery 2 - explorando possibilidades do framework

Excelente vídeo do pessoal do CSS-Tricks, explorando algumas funcionalidades deste facilitador para designers.

Intro to jQuery 2

Em alguns trechos fica impossível de entender o que o cara narra, mas vale a pena assistir todos os 25 minutos.

[Programação]: Efeito fadeIn/fadeOut em transição de imagens com jQuery

jQuery, facilitador para efeitos em sua aplicação

Disponibilizo aqui um script que fizemos aqui na binworks para fazer uma transição de uma imagem num  bloco fixo, o efeito é o seguinte: a imagem desaparecer lentamente e aparecer outra em seguida, um simples efeito fadeIn/fadeOut. Para isto utilizamos o framework jQuery para facilitar o desenvolvimento.

Veja o passo a passo:

Ao iniciar o documento anexamos uma função para fazer a imagem aparecer quando for carregada:

$(document).ready(function(){ $('img#troca').load(function(){ $(this).fadeIn('slow'); }));

Agora fazemos a função da troca da imagem:

function trocaImg() {
	var imgNova = $('<img />')
				.load(function(){ $('img#troca').fadeOut('slow', function(){ this.src = imgNova.src; }); })
				.attr('src',"url da imagem");
}

O que irá fazer as funções:

1. Ao iniciar documento, a imagem especificada na função ready() vai ganhar um fadeIn quando carregada.
2. Ao clicar chamar a função de troca, ela criará temporariamente uma nova imagem, guardará no buffer, ao terminar seu carregamento, dá um fadeOut na imagem do passo 1
3. Ao dar o fadeOut, trocará a imagem do passo 1
4. Devido a função adicionada na imagem do passo 1, chamará automaticamente a função, dando um fadeIn e mostrando a nova imagem.

Claro que esta função pode ser muito melhorada (destruir a imagem criada temporariamente, por exemplo),  mas é um exemplo simples, podem poderoso.

[Artigo]: Diego Eis me decepcionou

Estava na minha leitura diária de feeds, quando me deparo com um post vindo do Tableless que me deixou revoltado, o post se chama:  jQuery é para designers.

O artigo faz uma abordagem muito “esdrúxula” (no sentido de esquisita) sobre utilidade do jQuery, comentei até no artigo, mas a pessoa que postou censurou meu comentário, ao mais belo estilo chinês de ser. Acho que esse Michael Granados é estagiário da Visie.¬¬’ o comentário demorou para ser moderado, o que me levou a pensar coisas errada a respeito. Peço desculpas ao Diego Eis, mas não muda minha opinião em relação ao artigo.

Primeiramente pessoal, jQuery não serve só para “firulinhas” de Design, serve muito bem para controle DOM, controle de Eventos, controle CSS, a parte de Ajax é maravilhosa! Só que estes tipos de coisa do JQuery não foram mencioandas no artigo. Para um blog do calibre do Tableless, passar uma impressão errada sobre algo é mortal, afinal são formadores de opinião. Não vou me aprofundar na defesa do jQuery, apenas gostaria que o artigo fosse entitulado: jQuery como um facilitador para Design, ficaria correto e passaria uma impressão melhor aos leitores, para quem está começando vai pensa que só serve para Design, francamente. Mandei até um e-mail no formulário deles criticando a ação, fiz minha parte: Democracia.

Quando estava começando a aprender sobre semântica no HTML, o Tableless foi um veículo muito importante para mim, considerava Diego Eis (criador do blog site) uma figura de inspiração para mim, só que infelizmente depois deste artigo, mitos caem. Tableless virou mesmo marketing da Visie. ver este tipo de artigo só me deixou decepcionado com a forma que foi abordada. Desculpas novamente pelo meu equívoco, falha minha total².

[Programação]: Carregando Javascript/CSS dinamicamente com jQuery

Sempre me deparo com as seguintes situação: tenho que carregar bibliotecas (como tinyMCE) em gestores de conteúdo, mas o tamanho da biblioteca é muito grande (sem Gzip) ou tenho que carregar um CSS para impressão de uma página, mas o somente a parte do conteúdo é dinâmica, cabeçalho/rodapé são dinâmicos.

Vou carregar coisas desncessárias em páginas que não preciso? Lógico que não né. :B

Pensando um pouco cheguei a conclusão: posso “injetar” na header do documento quando atingir as páginas que preciso, veja o código abaixo, utilizando jQuery:

function loadScript(src) {
$(’head’).append(
$(document.createElement(’script’))
.attr({
type: ‘text/javascript’,
src: src + “?_” + parseInt((Math.random()*1000000))
})
)
}
function loadCSS: function(src, media_css) {
$(’head’).append(
$(document.createElement(’link’))
.attr({
rel: ’stylesheet’,
type: ‘text/css’,
media: media_css || ’screen,projection’,
href: _HTTP_PATH_ + src + “?_” + parseInt((Math.random()*1000000))
})
)
}

Onde eu quero carregar dinamicamente um CSS, eu simplesmente faço isto:

<script type="text/javascript">loadCSS("css/impressao_pagina.css", "print");

Geralmente adiciono isto no próprio html mesmo (que será carregado quando o documento terminar o seu “loading”) ou via a função ready() do jQuery.

Isto seria uma forma de Lazy Loading de pobre, mas na essência do conceito, não deixa de ser.

Rápido e indolor

[Programação]: jQuery 1.2.6

Meio atrasado, mas vai ai para quem não gosta de se anternar em feeds:

Saiu essa semana a versão 1.2.6 para o jQuery, pulou direto da 1.2.3 para esta versão (tinha versões no SVN, mas preferiram reunílas e liberar esta). Reza a lenda que com grandes otimizações de código, aumentando a performance:

• Seletores CSS: ~13%
• Manipulação de Eventos: ~100% (uau! dobrou de velocidade)
• .offset: 21%
• .css: 25%

Para verem mais detalhes do tunning do jQuery, vejam a planília no Google.

Várias outras correções tiveram tambem (vejam as notas de versão) e tambem implementaram no motor dele um plugin ótimo para obter melhor dimesões e posicionamentos de elementos.

Resta saber se aquela versão do jQuery para a Ui dele (param quem brinca com a UI como eu) vai sofrer atualizações (porque ela é 1.2.4a).

Via Ajaxian.

Artigo: Unobtrusive JavaScript com o jQuery

Vendo meus Feeds no Bloglines, me deparei com um artigo muito bom do Ajaxian: Unobtrusive JavaScript with jQuery.

Simon Willison falou na XTech de 2008 sobre o uso não-obstrusivo de Javascript, mostrando o jQuery como instrumento demonstrativo e porque ele é uma boa escolha. Ele disponibilizou uma apresentação online de Slides para os mais interessados.

Javascript não-obstrusivo é um assunto muito falado nos dias de hoje, devido a vários fatores como interoperabilidade e manutenção facilitada.

Achei legal uma função que ele utilizou para verificar no PHP por requisições em Ajax, vou implementa-la em meus projetos.

jQuery and Prototype Benchmarks

Prototype é um ótimo framework de desenvolvimento javascript, cheio de funções para simplificar muitas coisas que tinhamos que fazer via javascript, o que em minha opinião revolucionou este quesito de desenvolvimento.Desenvolvi 1 ano em cima do Prototype, para mim não existia algo melhor.

Um belo dia descobri o jQuery, que pregava o conceito “The Write Less, Do more”, ou seja, com poucas linhas de comando eu podia fazer grandes coisas com ele. Ele pregava um conceito de “acorrentamento” (Chainability), que era o grande diferencial dele. Com um pouco de receio, aos poucos comecei a usar ele, esquecendo tudo que sabia já sobre o Prototype .

Mas sempre ficou algo na cabeça: “Qual dos dois é melhor? Qual tem mais performance?”

Ai veio o Piotr Solnica, do blog “s0lnic on blog” fez uma série de posts sobre este assunto, baseado na nova versão do Prototype (1.6.0) que saiu recetemente.

Veja aqui um exemplo de uso dos dois frameworks:

// Jquery
$(’a.primeiro’).addClass(’marcado’);
//Prototype
$$(’a.primeiro’).each(function(link){
link.addClassName(’marcado’);
})
//Outro caminho pelo Prototype
$$(’a.primeiro’).invoke(’addClassName’, ‘marcado’);

O exemplo acima resolve a seguinte situação: “Quero adicionar uma classe para todos os links que tiverem a classe “primeiro”. Pelo jQuery como podem ver é simples, ele simplesmente adiciona em todos o que encontrar a classe primeiro, já o Prototype tem que se fazer uma iteração pelo encontrado a solução dois você tem que invocar um método do Prototype para adicionar a tal classe.

Algo interessante que eu vejo de diferença nos dois é que enquanto o jQuery devolve o que você quer em forma de objeto, o Prototype devolve em objeto DOM mesmo, apenas extendendo com algumas funcionalidades. Já no jQuery eu tenho que sempre declarar o seletor em cima do elemento que eu quero, o que torna meio chato.

Piotr chegou a conclusão que em questões de performance, o Prototype se destaca e muito em relação ao jQuery (principalmente pela diferença citada acima), escrevendo a seguinte conclusão:

Prototype was at least 2 times faster then jQuery in 15 cases, and jQuery was faster then Prototype in 8 cases. What library should I choose? In my case I will stick with Prototype, because it offers the same functionality as jQuery does + more and it’s faster. jQuery is probably better for projects where there’s a need for some fancy UI effects and that’s it, but it’s just an assumption, correct me if I’m wrong…

Em minha opinião eu ainda fico com o jQuery, pelo o que eu posso fazer com poucas linhas de código, deixando a manutenção fácil, já performance é relativo dependendo muito de máquina para máquina.

Caso querem acompanhar até um teste bacana de velocidade (não se beaseiem nele): http://www.domassistant.com/slickspeed/ (Prototype tomou uma surra nele aqui no meu pc).

Enfim, o que eu recomendo é: “Entrem no site de cada um, veja uns demos, olhem a sintaxe e a documentação e decidam qual utilizar”

Para lerem os artigos do s0lnic: s0lnic on blog

Inspirado no post do Ajaxian

jQuery - codificar valores (escape()) com o serialize()

Hoje me deparei com um problema, estou enviando formulários via Ajax (bem mais rápido) via POST no PHP, com o auxílio do jQuery e em alguns métdos de chamada Ajax eu uso mais ou menos desta maneira:

$.ajax({
 url: form.attr('action'),
 data: form.serialize() + "&ajax=true",
 type: 'post',
(...)

Notem que eu uso o método serialize() do jQuery para me retornar uma string com todos os valores concatenados (ex: nome=julio&sobrenome=vedovatto&foo=bar), método muitíssimo util.

O que eu deparei é que tem o velho problema: acentuação, o fantasma do Ajax. Nem com reza braba se resolve isso direito, sem um bom e velho escape() na string e depois um rawurldecode() no PHP (ou outra função que faça isso na sua linguagem preferida :P).

O que eu resolvi fazer? Baixar um source atualizado do jQuery e modificar a função serialize(), deste modo (em torno da linha 2457 do código-fonte):

serialize: function(escape_chars) {
 	return jQuery.param(this.serializeArray(escape_chars || false));
 },
 serializeArray: function(escape_chars) {
 	return this.map(function(){
 		return jQuery.nodeName(this, "form") ?
 			jQuery.makeArray(this.elements) : this;
 	})
 	.filter(function(){
 		return this.name && !this.disabled &&
 			(this.checked || /select|textarea/i.test(this.nodeName) ||
 				/text|hidden|password/i.test(this.type));
 	})
 	.map(function(i, elem){
 		var val = jQuery(this).val();
 		return val == null ? null :
 			val.constructor == Array ?
 				jQuery.map( val, function(val, i){
 					return {name: elem.name, value: val};
 				}) :
 				{name: elem.name, value: (escape_chars) ? escape(val) : val};
 	}).get();
 }

Vejam que adicionei um parâmetro na função serialize(), quando passar true, ele irá usar um escape() nos valores dos dados. Desta maneira no php eu utilizo um rawurldecode() e pronto. \o/

É só você fazer esta modificação e compilar o código-fonte com o packer, para reduzir seu tamanho (de 94kbs do original para aproximadamente 31 kbs do compacto).