Leo Balter, Web Standards, jQuery e Wordpress

Esse texto se refere a métodos bem simples que servem pra verificar o tamanho de imagens.

Podemos verificar sempre a altura e largura dos elementos na página com jQuery, assim como podemos checar esses valores a diversos tipos de elementos na página, não somente imagens.

São os métodos o weight e o height, vejamos:

jQuery('#imagem1').height(); // retorna a altura
// e
jQuery('#imagem1').width(); // retorna a largura

Além disso, esses métodos com valores dentro – exemplo: .height(’400px’) – pode ser utilizado para alterar o tamanho do elemento.

Mas quando só temos a url do arquivo de imagem ou ela é contida no background? A altura e largura vão ser relativas ao elemento, não necessariamente à imagem.

Vamos mostrar como podemos montar um elemento img e obter seu respectivo tamanho.
Ler mais »

Tutorial rápido e prático: vamos desabilitar datas no DatePicker do jQuery UI.

Vamos supor que você quer exibir um datepicker pro usuário e nele você já configurou data mínima e data máxima com as propriedades minDate e maxDate. Você precisa agora selecionar uns dias específicos.

Vamos supor: estamos no mês de Agosto de 2010, vamos exibir o calendário com os 31 dias do mês e não queremos exibir os dias 10 a 12 do mesmo mês.
Ler mais »

Estava lendo um artigo em inglês indicado pelo Ajaxian com 8 dicas para micro otimização do jQuery, era o 8 jQuery Micro Optimization Tips.

As dicas são muito boas, resolvi compartilhar algumas ideias por aqui.

Lembre-se que as dicas são para performance, não necessariamente para facilitar a programação e quebram o conceito de “escreva menos, faça mais”. Aqui estamos falando de práticas que podemos adotar quando a execução do jQuery depende de situações críticas ou temos muito código em nosso documento.

Ler mais »

Vou listar algumas das melhores IDEs para desenvolvimento em evidência no mercado. Não apenas para montar HTML 5 e CSS 3, mas também para códigos e algorítmos em diversas tecnologias, como Javascript, jQuery e até podemos arriscar algumas linguagens “server side”.

JSBin

JSBin é uma ferramenta excelente para teste colaborativo de html e javascript. Facilitando a integração algumas das mais populares bibliotecas e frameworks JS, ele permite que o usuário insira rapidamente o seu código e grave com um controle de versão muito simples. JSBin definitivamente não é apenas um marcador de código.

Característica que vale ressaltar: JSBin é open source, 100% free.

Kodingen

PHP, Ruby on Rails, Django, Perl, SVN, Git, etc? Você ainda achava que era impossível ter uma IDE pra tudo isso que fosse também browser based? Kodingen é o nome dessa poderosa ferramenta que oferece uma boa parte de seu sistema de forma gratuita e está conquistando muitos fãs pela web.

Ler mais »

Simplesmente é um projeto open-source em javascript bem bacana que facilita a vida de quem tem que criar um CSS. Algo como um único border-radius pra servir com todo browser (menos a merda do IE, claro).

Ele é totalmente modular e com suas extensões pode-se obter muitas facilidades, como ampliar seletores CSS 3 para IE6, criar transforms, transitions, @font-face de forma mega fácil.

Para usar o módulo de seletor deve-se indicar um outro módulo já pronto, como o Sizzle, o mesmo já carregado e utilizado pelo jQuery e fazer uma pequena declaração no js indicando o seletor:

eCSStender.addMethod('findBySelector',Sizzle);

O eCSStender tem uma integração excelente com diversas bibliotecas tais como jQuery, prototype, etc. Não rola conflito! Fica tudo de forma simples e clara pra manutenção, deixe a trabalheira com o eCSStender!

O nome está assim para trazer a pronúncia: “extender”.

No link http://ht.ly/2b5Lc tem um exemplo bem legal que usei junto do html5shiv para usar tags de html 5 na página e ter algum resultado decente no IE6.

Fiz há poucas semanas uma apresentação com a temática “Como funciona o jQuery?”.

Deixei ela disponibilizada no slideShare e no youtube, assim deixo disponível a todos que quiserem assistir.

Para baixar no slideShare: http://www.slideshare.net/leobalter/como-funciona-o-jquery

O assunto é extremamente simples, mesmo assim é um dos mais procurados e não há muita facilidade de se encontrar no google com palavras chave comuns às perguntas que são feitas.

Sempre aparecem perguntas na lista do Google Groups “jQuery Brasil” sobre exatamente a mesma resposta:

• “O evento click() para de funcionar depois de criar elementos com ajax”
• “Seletor do jQuery para elementos criados com ajax”
• Meu site para depois da resposta ajax
• O jQuery não funciona direito com o ajax, só funciona antes de usa-lo

A resposta e a solução são simples:

Usem o maldito live!

Ler mais »

Gosto muito desses três tipos de tecnologia: jQuery, Ajax e WordPress. Fazem parte do que mais me empolga em trabalhar com web.

O mais legal disso tudo é saber que eles estão em total sintonia. Vou passar uns exemplos rápidos de como fazer comunicações em ajax utilizando o jQuery no “client-side” se comunicando com o WordPress no “server-side”.

Vamos supor um caso onde eu queira fazer uma busca dinâmica para buscar uma lista de taxonomias e imprimir essa lista em determinado local da tela.

Ler mais »

Estou lançando um novo plugin para jQuery: sliderMenu com apenas 4KB de JavaScript!

Não fiz o plugin sozinho, contei com a colaboração do Vitor Leal (visite o site dele), que preparou o CSS, as imagens e o HTML básico que é exibido no final. Fiquei responsável por todo o JavaScript além de alguns “position absolutes” e a idéia de o html inicial que vai montar o banner ser totalmente correto e útil em termos de SEO. A ideia é que a pessoa que montar o seu sliderMenu não perca créditos de SEO da sua página.

Você pode ver uma demonstração do plugin em http://leobalter.net/jquery/banner/ e também pode fazer o download do plugin em http://leobalter.net/jquery/banner/sliderMenu.zip.

Edição: como o projeto é opensource disponibilizei o mesmo no github: http://github.com/leobalter/sliderMenu.


Ler mais »