Conheça o jQuery Boilerplate: Entrevista com Zeno Rocha

Trabalhar com jQuery ou Javascript e não conhecer Zeno Rocha é bem difícil, mas mesmo assim não vou deixar de apresentá-lo. Ele tem 21 anos e já tem muita história para contar. Foi desenvolvedor de software na Petrobrás, e hoje trabalha no Globoesporte.com, estuda Sistemas de Informação na Universidade Federal do Estado do Rio de Janeiro (UNIRIO) e ainda tem tempo para implementar um bocado de ideia open-source, como o jQuery Boilerplate (no qual iremos falar neste post) e o Wormz do Chrome Experiments.

Particularmente falando, eu já conhecia Zeno remotamente, mas só o conheci pessoalmente no Pernambuco.JS, evento que participei da organização e ele era um dos palestrantes. O jQuery Boilerplate é apenas um de seus projetos, e conhecer esta iniciativa será bem inspiradora para todos nós que trabalhamos com desenvolvimento web. Acabando um pouco com o blá-blá-blá, vamos partir para o objetivo do post!

O que é?

O jQuery Boilerplate é um pontapé inicial para os desenvolvedores construirem plugins jQuery. Um conjunto de boas práticas que visam te auxiliar nesse processo.

Como surgiu a ideia?

A ideia surgiu enquanto estava no trabalho, na época ainda trabalhava para Petrobras e notei que a lógica que estava codificando poderia ser útil para outras partes do sistema. Na hora pensei: “Bem que isso poderia se transformar em um plugin jQuery”.

Dei uma pesquisada no nosso amigo Google em busca de encontrar um modo para construí-lo e me deparei com dezenas de abordagens diferentes. Aquilo me deixou confuso e pensei: “Por que não criar um padrão definitivo contendo as melhores práticas, já que ninguém o fez antes?”.

Algumas semanas antes disso, tinha palestrado no Front in Rio sobre o HTML5 Boilerplate e estava encantado com esse projeto. O que não me fez pensar duas vezes, o nome seria jQuery Boilerplate.

Corri atrás para descobrir se o domínio estava disponível. Impulsivo, saquei o cartão de crédito e comprei naquela hora mesmo. Começava aí minha saga em tentar estabelecer o padrão mais famoso para o desenvolvimento de plugins jQuery.

E um pequeno detalhe, nunca tinha criado nenhum plugin antes.

Como começou o projeto?

O primeiro passo foi entrar em contato com Paul Irish, o líder do projeto HTML5 Boilerplate na época. Minha ideia era utilizar o mesmo conceito e identidade visual deles, o que foi negado já que eles acharam melhor não vincular as coisas. Tudo bem, segui em frente, sozinho mesmo.

Comecei a estudar bastante o assunto, até que conheci Stefan Gabos, um desenvolvedor romeno que também estava desenvolvendo algo do tipo. Juntamos forças e chegamos em uma primeira versão. Preparei o site em inglês e lancei!

No primeiro dia (24/07/11) o site teve 64 visitas. No segundo, 2.767! O motivo desse boom tão repentino foi um simples tweet da Smashing Magazine, expondo o projeto para o mundo.

A repercussão foi grande e rapidamente chegou aos ouvidos do Core Team do jQuery, tudo ia bem até que recebo o seguinte Pull Request no Github:

O padrão proposto foi duramente criticado. E com razão, pois feria princípios importantíssimos da criação de plugins, estava na hora de mudar.

Foi então que surgiu Adam J. Sontag, desenvolvedor do Core do jQuery e jQuery UI, muito solicito em expor quais eram os problemas do projeto. Além de Addy Osmani que estava iniciando a escrita do livro Essential JavaScript & jQuery Design Patterns e por isso muito interessado no assunto.

Juntos chegamos ao que temos hoje.

Muitas pessoas utilizam?

Muitas! Hoje em dia o repositório do Github possui mais de 600 viewers e cerca de 100 forks. Só de acessos no site, já passam mais de 40 mil. O problema é que dessas 40 mil visitas, apenas 6% são oriundas do Brasil, os EUA lideram com 47% das visitas.

Quais as novidades do projeto?

A mais expressiva é o lançamento da tradução do site para português, algo que eu vinha procastinando há muito tempo, mas que criei vergonha na cara e terminei semana passada.

Recentemente, também foi incorporado, em uma branch separada, o uso de Rake para o pessoal que utiliza Ruby. Pra quem não conhece é uma ferramenta de build muito útil que realiza tarefas como minificação, validação do código com JSHint, compilação de CoffeeScript e etc.

E quais são os planos para o futuro?

Por muito tempo não me dediquei muito em torná-lo público, mas a adoção pelo mundo tem sido incrível e meu objetivo agora é disseminar isso ainda mais aqui no Brasil.

Portanto, aos poucos algumas ações tem sido feitas, o primeiro passo foi a tradução, lançada juntamente com o artigo “Tudo que você gostaria de saber sobre plugins jQuery e ninguém teve paciência de explicar” no Tableless, isso sem contar essa própria entrevista.

Além disso, estão previstas traduções para outros idiomas, a integração com o Grunt para facilitar a vida de quem usa NodeJS e quem sabe um gerador. Ou seja, muito trabalho pela frente e se você quiser ajudar é só chegar lá nas issues do Github.

Alguma mensagem final para os nossos leitores?

Coloque a cara pra bater, mostre seu código para o mundo. Fique atento, observe o que acontece na sua área. Eu tive uma ideia, achei que tinha potencial e coloquei no ar, só isso. Fui criticado, aprendi muito e hoje o projeto é um sucesso.

Hoje eu expus detalhes de uma história pessoal na esperança de inspirar outras pessoas a se envolver mais com esse mundo open source. Muita gente acaba não fazendo isso com a desculpa de não ter tempo, se você é uma delas pare com esse blá blá, durma menos e coloque alguma coisa no ar, você vai se surpreender com a proporção que isso pode tomar.

jQuery UI datagrid

Para inaugurar meu primeiro post aqui no jquerybrasil (.org), preparei alguns demos do plugin (jquery.ui.datagrid) que desenvolvi baseado no $.ui.widget. Lembrando que não é um plugin oficial do jQuery UI. Criei para sanar minhas necessidades dentro dos projetos que sou contratado. Lembrando que a equipe do jQuery UI criou o jQuery UI Grid Project com o objetivo de juntar todo conhecimento e boas práticas dos “plugins de grid” existentes dentro do UI.
(mais…)

datagrid, jquery, jqueryui

jQuery Browser Plugin – Identificando navegadores com técnica CrossBrowser

Vou falar aqui de uma das técnicas utilizadas para ter seu site crossbrowser, claro, usando jQuery.

Sabe-se que as técnicas mais populares são:

• Conditional Comments
• CSS Hacks
• Classe Css no Html

A técnica que irei comentar é a terceira, e essa minha versão é feita por JavaScript, porém caso prefira, pode ser feito via programação de servidor.

Tudo que temos que fazer é incluir esse plugin jQuery Browser ao nosso projeto.

Funções

• $.browser – Ela estende a função nativa do jQuery e acrescenta propriedades como versionNumber e name (msie, firefox, chrome, etc).
• $.layout – Identifica a engine de layout, ex: konqueror, webkit, khtml, trident, etc.
• $.os – Identifica o sistema operacional do cliente.
• $.browserTest – Adicionará na tag classes css que representarão os dados acima, seguidos do número da versão.

Como o plugin já chama automaticamente a função $.browserTest, só temos que ver o resultado:

Agora você pode adicionar particularidades na folhas de estilos:

CSS

.chrome #menu{ width:100px }
.firefox #menu{ width:101px }
.msie8 #menu{ width:102px }
.msie6 #menu{ display:none } /* trollface! */

E também no JavaScript via jQuery:

JavaScript

if( $("html").is(".msie6") ){
     $("#menu").hide();
}
//ou
if( $("html").hasClass(".msie6") ){
     $("#menu").hide();
}

Obs: Como o plugin já não recebe atualização desde 2008, ele ainda não identifica Androids e iPad, está aí uma oportunidade para criarem um fork do projeto.

browser, crossbrowser, jquery, plugin

jQuery.Storage – Utilizando localStorage cross-browser com cookie fallback

Nesta semana precisei salvar algumas informações do usuário no navegador, mas queria algo mais robusto do que o próprio cookie maledito que dá tanta dor de cabeça. Então numa conversa com meu amigo @wilkerlucio, fui informado sobre a possível utilização do localStorage. Prontamente corri ao google/github para procurar algum plugin jQuery sobre. Achei alguns, porém, testei um único e gostei muito.

O jQuery.Storage é um plugin jQuery para facilitar a utilização de localStorage com uma grande utilidade que é um fallback para cookies, caso o navegador ieca7- não tenha suporte ao localStorage. Mas, para que não fique confuso para algumas pessoas que nunca ouviram falar em localStorage ou fallback, vamos pensar um pouco, como diria nosso querido telecurso 2000. Pesquisando sobre o assunto, achei um post sobre HTML5 e local storage muito mais interessante que esse, mas que não fala sobre o plugin, onde o zeno rocha fala muito organizadamente sobre o que é o localStorage, sessionStorage e ainda tem uma tabelinha de compatibilidade entre navegadores.
(mais…)

fallback, jquery, localstorage, plugin