O texto não vai ser sobre os gigas de filmes em 1080p que rolaram na rede interna. Juro que não vou falar mais nada sobre os Terabytes que estavam sendo compartilhados a certo momento pelos participantes do evento. Parei.
Os melhores “downloads” do evento não rolaram dentro das maquinas.
Muitas vezes a troca de informação aconteceu sim na frente das maquinas, onde grupos se formavam em volta de algum livestream e começavam papos informais. Papos que passavam entre conversas do dia a dia e depois caim em tópicos avançados sobre redes, projetos open source e algoritmos de sistemas de defesa antimíssil.
E não foi só na área interna que a troca de conhecimento aconteceu. Foi do lado de fora que também conheci pessoas que fizeram minha cabeça explodir algumas vezes. Lá tentaram me dar uma aula de calculo e conseguiram que isso fosse interessante a ponto de eu entender.
Pode ser difícil imaginar para quem não é iniciado na matéria, mas tente imaginar o algoritmo de um sistema de defesa aérea. Um software que faz uma matriz de integrais e partir disso controla o projetil que será lançado para neutralizar a ameaça.
Explicado por quem conhece a teoria da implementação de um sistema desses empregado pela aeronáutica brasileira não foi tão díficil achar interessante e entender. Só na Campus Party mesmo…
Nas poucas palestras que acompanhei também consegui ver bons tópicos.
A sobre o sistema de arquivos ZFS mudou meu entendimento sobre sistemas de arquivos modernos, mas a que vai me dar trabalho para digerir foi a do comandante Mario Name e a resposta a uma pergunta (segredo) que fiz ao comandante de Boeing 777, Edu Carceroni, que também estava na palestra.
Voltando para área de software, conversar com pessoal de desenvolvimento de empresas como IBM, Telefonica e Itaú sempre abre novas oportunidades e agregam conhecimento. Mas confesso que em questão de tecnologia (do tipo que não precisa da palavra “nova” na frente) eu escolho as startups e as comunidades de projetos open source.
O George Guimaraes do PageStacker me explicou importantes conceitos de redes todos os dias. Markun e o pessoal do Jornal de Debates compartilharam conhecimento sobre comunicação assim como Jreige da Polvora. Manoel Lemos comandou o CP Labs, a área onde várias startups tiveram espaço para se apresentar para investidores e para o público da Campus Party e que passei algum tempo aprendendo muito.
Com o pessoal do open source rolou uma excelente discussão sobre a web e internet que passou por vários tópicos que ajudaram ainda mais a moldar meu conceito de “rede” e de “internet” e as diferentes partes de estrutura e de social que cada termo representa.
Nas experiências aqui relatadas e nas diversas desconferências que ocorreram dentro e fora da área reservada do evento, não é possível falar qual era a velocidade dos downloads e qual a quantidade de informações que foram compartilhadas. Não tem como medir em bytes o que passou por meio de voz e de gestos entre as pessoas que ali estavam.
Para quem gostou da festa e não pode esperar até ano que vem, que tal caravana para Assembly ou para a The Gathering?
17/1/2009 | Tags:money, trabalho | Escrito por: Dirceu Pauka Jr.
Começando atrasado mas começando: a partir de agora vou tentar postar a cada final de ano quais as siglas relacionadas com meu trabalho durante o ano que passou.
2005:
html
2006 na Coll, não linko
html, css, js, asp, access, mssql
2007 em casa e faculdade:
html, css, js, php, ruby, mysql, rails, wordpress
Algumas dicas de jQuery eu passava para amigos, mas agora encontrei uma coleção de Excelentes truques e dicas para jQuery que traduzi, adicionei comentários, retirei o que não acho legal e agora compartilho aqui:
Se você utiliza sempre o jQuery em seus sites, uma excelente maneira de acelerar o carregamento é usar o arquivo jquery-1.2.6.pack.js diretamente do Google Code. Além de diminuir o gasto com banda, o navegador do usuário faz cache do arquivo entre os vários sites que usam essa técnica o que dará uma experiencia de navegação melhor para o visitante.
O Google tem uma infra-estrutura de espelhamento ao redor do mundo, sendo o mais rápido e melhor serviço de distribuição de conteúdo (ou CDN para os íntimos).
Aproveite os milhões de computadores do Google e faça com que o jQuery seja carregado de lá.
Existem várias ferramentas para isso, mas ao invés de combinar eu ainda prefiro minimizar separadamente os scripts e CSSs. Uso para isso o YUI Compressor do Yahoo!
Combinar acho que vale mais para o Apache ou outros WebServers, onde a quantidade de requisições no servidor importava. Hoje com Nginx e outras soluções para o problema de escalabilidade a quantidade de conexões HTTP com o servidor não é um problema tão critico.
Já vi casos que um arquivo não compactado foi a diferença entre manter 1 servidor dedicado ou precisar “comprar” um novo. Fikdik de como escalar WowWowWow.
Em um computador atual isso não demora nada, mas lembre-se que o usuário utiliza equipamentos muito piores que seu Macbook Pro. Imagine eles em seus fracos iPhones, ou pior ainda, em um Opera Mobile.
Então mantenha o seletor fora do loop:
6 – Use o minimo possivel de manipulação com o DOM
Funções como .append(), .prepend(), .after(), .before() são relativamente custosas e podem deixar as coisas lentas.
É consideravelmente lenta perto de:
Escrever no DOM somente uma vez é um pouco mais rápido. Já que aqui estamos mesmo lutando por optimizações (lembrem-se dos mobiles), vale né?
7 – Coloque tudo dentro de um elemento antes de fazer uma inserção ao DOM
8 – Use IDs em vez de classes sempre que possivel
A função de busca por com CSS3 Selector é muito legal de se usar, mas o jQuery implementa ela em JavaScript, e usando o máximo que a API do DOM deixa. Isso as vezes não é o ideal para performance, acredite.
Navegadores como o WebKit já possuem implementação nativa dessa função, indo de acordo com o que foi pensado no framework Prototype, mas lembre-se, em desktop/notebook a hegemonia é de quem não IEmplementa novidades tão cedo.
No mercado de mobile, WebKit e Opera lutam para ver quem tem o maior numero de especificações da W3C implementadas.
Uma busca por ID no DOM quase sempre é mais eficiente que a busca por classe, prefira sempre usar ID.
9 – Dê um contexto para seus seletores
Eu tenho dúvidas quanto a eficácia de contextualizar os seletores via Javascript, comparada ao uso de contexto no CSS3. De qualquer forma as seguintes formas de uso são mais rápidas do que buscar um elemento no documento inteiro.
10 – Use encadeamento de funções
Uma das características mais legais do jQuery é a possibilidade de encadear métodos. Então, por exemplo, se você deseja alterar a classe de um elemento:
Provavelmente você aprendeu isso em seus primeiros 5 minutos de leitura sobre jQuery.
Note que continua funcionando mesmo com quebras de linhas (jQuery == JavaScript), o que significa que você pode escrever código assim:
Usar encadeamento também ajuda a diminuir a quantidade de seletores.
Mas ainda é possivel ir além. Digamos que você deseja executar várias funções em um elemento mas uma das primeiras funções muda o elemento selecionado de alguma maneira:
Nós selecionamos uma tabela, descemos para buscar celulas com a classe “primeiraColuna” e então a pintamos de vermelho.
Digamos agora que queremos colorir todas celulas com a classe “ultimaColuna” de azul. Já que usamos o método find(), filtramos todas as células que não tinham a classe “primeiraColuna”, assim seria necessario o uso de um seletor novamente ou então não poderiamos continuar encadeando, certo? Nah! O jQuery possui o metodo end() que reverte a última seleção, então você pode continuar encadeando tipo:
É também mais fácil do que você imagina escrever suas funções de forma que elas possam usar encadeamento.
Tudo que você precisa é fazer que suas funções modifiquem e retornem o mesmo elemento.
Bem legal!
11 – Saiba como usar a propriedade de animação
Quando eu comecei usar o jQuery eu adorei o fato de que é fácil usar animações pré-definidas como slideDown() e fadeIn() para conseguir alguns efeitos com incrível facilidade.
É também fácil ir ainda além por causa da facilidade que é usar o poderoso método animate().
Se você olhar os metodos slideDown() e fadeIn() dentro do framework verá que são apenas atalhos para o metodo animate().
O método animate() simplesmente pega qualquer estilo de CSS e aplica transições de um valor a outro. Então as mudanças nas propriedades width, height, opacity, background-color, top, left, margin, color, font-size e qualquer outra que você quiser podem ter animações!
É muito fácil animar todos itens do seu menu para 100 pixels usando isso.
Diferentemente de outras funções do jQuery, as animações são colocadas em fila de execução automaticamente. Se você quiser rodar uma segunda animação somente quando a primeira terminar, então é só chamar o método novamente sem precisar usar um callback.
Porém, se você você desejar que as animações ocorram no mesmo tempo, então insira ambas na mesma chamada assim:
O jQuery torna fácil adicionar eventos em elementos do DOM de forma inobstrusiva, o que é muito bom, mas adicionar muitos eventos é ineficiente. A delegação de eventos permite que você adicione em muitas situações menos eventos e atinja o mesmo resultado:
Vamos fazer uma função simples para tornar uma celula da tabela vermelha quando você clicar nela. Digamos que você tenha uma tabela com 10 colunas e 50 linhas, então são 500 delegações de eventos.
Não seria melhor se fosse possivel agregar o evento somente uma vez e então quando a tabela fosse clicada, chegar ao elemento que realmente foi clicado antes desse se tornar vermelho?
Para isso é que serve a delegação de eventos e isso é simples de implementar…
13 – Use classes (ou atributos) para armazenar estado
Essa é a maneira mais básica de guardar informação sobre um bloco de HTML. O jQuery facilita a manipulação de elementos utilizando classes, então se você precisa armazenar informações sobre o estado de um elemento, por que não adicionar uma classe extra nele?
Aqui vai um exemplo. Nós queremos criar um menu que expande. Quando você clica no botão nós queremos que o painel desça – slideDown() – quando ele tiver fechado, e que suba – slideUp() – quando estiver aberto.
Vamos começar com o HTML
Simples
Nós adicionamos uma classe extra na div de fora, que não possui outro proposito a não ser armazenar o estado do item. Então, tudo que precisamos é um evento de clique – click – para chamar o slideUp() ou o slideDown() no painel correspondente quando o botão é clicado.
if (menu_item.hasClass("expandido")) {
menu_item.removeClass('expandido').addClass('colapsado');
painel.slideUp();
} else if (menu_item.hasClass("colapsado")) {
menu_item.removeClass('colapsado').addClass('expandido');
painel.slideDown();
}
});
Esse é um exemplo bem simples, mas você pode adicionar classes extras para armazenar todos tipos de informações sobre um elemento DOM (pedaço de HTML).
De qualquer forma, melhor ainda é a próxima dica.
14 – Melhor ainda, use o método data() que é interno do jQuery para armazenar estados
O jQuery possui um metodo interno chamado data() que pode ser usado para armazenar informações de chave/valor sobre qualquer elemento DOM. Armazenar um pouco de informação é simples assim:
Nós podemos usar o exemplo da dica anterior. Vamos utilizar o mesmo HTML, porém ao invéz da classe “expandido” usamos o metodo data().
var item_menu = $(this).parent();
var painel = item_menu.find('.painel');
Para mais informações sobre os metodos data() e removeData() veja a documentação.
15 – Escreva seu proprio seletor
O jQuery possui vários seletores prontos para ajudar na seleção de elementos pelo ID, class, tag, atributo e muito mais. Mas o que fazemos quando é preciso usar seletores que vão além do que o jQuery deixa?
Bom, uma possivel solução seria adicionar classes nos elementos e usa-las para seleciona-los. Uma outra maneira é extender os seletores assim:
$('.box:mais100px').click(function() {
alert('O elemento que você clicou possui mais de 100 pixels de altura');
});
Primeiro criamos um seletor que acha qualquer elemento que é maior que 100 pixels. Depois usamos isso para adicionar uma ação de clique – click – em todos esses elementos.
O jQuery já quebra um galho ao facilitar a manipulação de elementos DOM, mas também adiciona metodos uteis para iterar, filtrar, clonar, juntar arrays ou remover elementos duplicados.
17 – Use a função “noconflict” para evitar conflitos com outros frameworks
A maioria dos frameworks para JavaScript usam o simbolo $ como atalho. Para evitar problemas existe uma solução simples, a função .noconflict() que permite definir outro atalho para o framework:
18 – Use função anonima para evitar conflitos com outros frameworks
Uma boa maneira de evitar conflitos no JavaScript (não somente com jQuery) é o uso de uma função anonima.
O que for executado dentro do bloco não muda com o escopo global, evitando problemas com nomes duplicados de variaveis e funções.
19 – Saiba quando uma imagem terminar de carregar
Use o método .load() em um elemento de imagem (IMG) com um callback. Simples assim:
É importante que o elemento já esteja no HTML.
20 – Sempre use a última versão
O framework está sendo constantemente melhorado por John Resig, seu criador. Sempre que uma versão nova sai ela possui melhoras na performance e se mantem atualizada com o que existe de novo nos navegadores.
A próxima versão do jQuery (1.3) virá com uma nova engine chamada Sizzle que além de mais rápida vai utilizar as funções querySelectorAll e getElementsByClassName já disponiveis nos navegadores mais modernos.
Então, utilize sempre a última versão.
21 – Como saber se um elemento existe?
Você não precisa checar se um elemento existe antes de manipular ele por que o jQuery simplesmente não faz nada caso o elemento não estiver no DOM. Mas as vezes você pode precisar executar algum pedaço de código que depende da existência de um elemento, para isso use:
22 – Adicione uma classe no HTML para saber que o JavaScript está disponivel
Logo que o jQuery carregar use ele para adicionar uma classe chamada “JS” na tag HTML:
Como isso só acontece quando o JavaScript (e o jQuery) estiverem prontos, você pode usar CSS para controlar quando um elemento deve aparecer somente quando o usuário estiver com JavaScript habilitado.
23 – Return ‘false’ para evitar a continuação de um evento
Quando você tem:
E adiciona um evento tipo assim:
Vai perceber que o bloco de código vai ser executado, porem o navegador irá para o endereço do link. Você pode usar “href=’#'” para evitar isso, mas assim a página irá voltar para o topo quando a ação de click for executada.
Para evitar isso, adicione um “return false;” ao fim do bloco de código:
24 – Atalho para a função “ready”
Você já deve estar acostumado a usar
Pois saiba que pode economizar um pouco de código simplesmente usando:
25 – Identifique váriaveis do tipo jQuery
Se você começar usar as dicas para evitar chamadas desnecessarias as funções do jQuery vai perceber que no seu código o número de variaveis carregando objetos jQuery irá aumentar bastante.
Para evitar que você se confunda e chame a função de seleção – $() – em um elemento que já é jQuery, identifique variaveis que carregam objetos do jQuery com um $ antes do nome.
Ufa! 25 praticas ninja para ajudar sua produtividade com jQuery. Se você tiver mais alguma boa pratica e quer compartilhar, por favor comente aqui
E se você gostou do artigo, por favor espalhe pelo mundo.
Eu sempre gostei do trabalho dos desenvolvedores do Yahoo!. Há algum tempo atrás desenvolvi um pouco com o SearchMonkey e comecei a acompanhar mais de perto o trabalho em projetos como o Hadoop
Hoje quando fui atualizar minhas versões do YUI Compressor (ferramenta para comprimir JavaScript e CSS) deparei com uma frase que resume o motivo pelo qual aprecio o trabalho dos engenheiros que trabalham lá:
+ Use preferentially lower case letters for obfuscated variable names. Since JavaScript keywords use lower case letters most often, this improves the efficiency of any compression algorithm (gzipping) used after minification.
Ou em português:
Histórico de mudanças
YUI Compressor 2.4.1, 28/10/2008
——————————–
+ Usa preferencialmente letras minusculas para nomes de variáveis ofuscados. Como a maioria das keywords de JavaScript usam minusculas, isso melhora a eficiência de qualquer algoritmo de compactação usado após a minificação.
Foda. Olha o detalhe que pegaram: as funções da linguagem JavaScript quase sempre estão em minusculas, então se eles usarem minusculas quando substituírem outros textos as chances de conter caracteres repetidos aumenta.
Como o principio de qualquer algorítimo de compactação é mapear e diminuir repetições, menor o arquivo vai ficar.
RSS
