corMVC, framework MVC para Javascript

corMVC é um framework MVC para Javascript, baseado em jQuery. Voltado para aplicações web de uma página só, onde você executa todas suas operações em estilo Ajax, na própria página. Segundo os criadores, é execelente como ponto de entrada para aprendizado da arquitetura de ’single-page application’ (aplicação de página única, como mencionado anteriormente).

É simples de começar a usar, não necessita de nenhum linha de comando, basta extrair tudo numa pasta e abrir no browser. Estou testando aqui e em breve posto meus comentários a respeito.

Motion: animação web sem flash

Encontrei esse projeto através do LinkedIn. Incrível, o autor consegue gerar um ambiente animado, onde você pode interagir com outros elementos, o cenário tem profundidade, e você pode guiar seu personagem através desse ambiente, usando o teclado, para qualquer direção. Até aí normal, porém, ele fez tudo usando apenas Javascript, sem nenhum Flash sequer. Ver essa audácia me relembrou a época em que desenvolvi um game 2d em Java, na faculdade, o K-Libre99, totalmente do zero.

O mais bacana é que ele demonstra que podemos sim ter coisas complexas feitas na web, com Javascript (que é nativo de qualquer browser hoje em dia), sem depender de plugins externos, como o Flash. Realmente, um trabalho excelente, demonstrando que a web não é dependente de Flash para criar experiências de usuário dinâmicas. Confira mais em http://www.geektestbox.com/devfiles/mdunham/brookside_beta/

Otimizando desempenho

Nos últimos dias, temos brigado muito por coisas muito pequenas, as vezes passageiras. Cada migalha desperdiçada é motivo para um nova discussão que acaba mudando o rumo das coisas… Calma gente, não estou tendo problemas de relacionamento não, são apenas discussões sadias de trabalho para se melhorar os níveis de performance nos aplicativos.

Quando se atinge um certo número de usuários de uma única aplicação, devemos tomar certos cuidados. Muitas vezes, ignoramos alguns pontos que podemos melhorar, deixando 1KByte, 2KB mais leves, pois afinal, para um usuário parece tão pouco, mas quanto representa 2KB multiplicado por 100 mil usuários? 195 MB. É, assusta, e as cifras só tendem a aumentar.

Com o advento da computação em nuvem, alguns perceberam que realmente deveriam otimizar suas aplicações, pois cada KB gasto vai representar algum valor que será, com certeza, debitado num cartão de crédito futuramente. Enquanto antigamente, bastava planejar a compra de uma máquina muito além das necessidades e ter um custo fixo, agora, a briga é para sempre diminuir a conta no fim do mês, como numa economia doméstica (certa vez, ouvi que toda economia é de migalhas. Concordo).

Mas muitas vezes, desenvolvedores de aplicações esquecem de alguns detalhes como por exemplo, o peso dos arquivos da camada de apresentação de suas aplicações. Na Web, isso também deve entrar na conta: tamanho do HTML, CSS, JS e imagens. E hoje em dia, são relativamente conhecidas técnicas para aprimorar esses estáticos para uma melhor experiência do usuário. Digo relativamente porque ainda me deparo com muitos websites, sistemas e gadgets por aí sem nenhuma otimização nesse sentido. No Brasil ainda temos muitos usuários que não dispõe de banda larga, e eles agradecem cada byte salvo.

Ler o resto deste artigo »

Tweetize-se! 99 atalhos de lambuja!

Para você que não pode ficar sem o Twitter em nenhum momento, e quer sempre uma nova forma de se conectar a essa ferramenta quase onipresente (essa última eu cunhei depois de ver o link que estou postando agora). Ou para você que procura algo mais sério ou útil para fazer com seu Twitter, ou até mesmo quem está buscando algo para tirar proveito do buzz alcançado com o microblogging. Faça bom proveito! Em inglês.

99 Ferramentas e aplicações para o Twitter

Uso do Python cresceu 45% desde maio de 2008

Gadget novo. Você precisa?

Via Sedentário e Hiperativo

Morte ao IE6

Quantos sites que você mantêm tem suporte ao IE6? Espero que poucos… pois há na internet um movimento contra o browser obsoleto. É, já são quase nove anos de batalha. Nessa batalha, ele venceu o Netscape e muitos outros browsers… mas será que foi jogando limpo? Só sei que ele assassinou (e ainda assassina boa parte) dos standards que o W3C defende no dia a dia.

Em alguns lugares onde trabalhei, ele já foi motivo de re-trabalho. Todos diziam: “Terminou? Agora tem que fazer funcionar no IE6“, ou até “Você sabe o que é POIE? Programação orientada a Internet Explorer“. Uma outra famosa: “Faça funcionar no IE6, e funcionará em todo o resto!“. Sim, na maioria dos casos. Mas a que custo? Acabar com todos os standards, e ter que gerar versões específicas de CSS para cada um dos browsers? Eu me recuso a re-trabalhar na maioria das vezes. Sigo os standards, e faço adaptações apenas em seções muito cruciais para o funcionamento do trabalho.

Muitos sistemas e redes sociais já colocaram avisos quando você roda o browser empoeirado, pedindo que instale uma versão mais recente ou até mesmo um outro browser. E acho isso muito certo. Até quando vamos dar suporte a tecnologia antiga? Já é quase uma década de vida… aspirando a morte. Os computadores recém-adquiridos já vem com sistemas atualizados, e claro, com browsers atualizados. (Qualquer versão do Windows Vista vem com pelo menos o Internet Explorer 7).  Qualquer distribuição decente tem um sistema de atualizações automáticas que alertará para o uso de uma versão atualizada do browser atual. Não seja antiquado! Atualize esse browser meu rapaz!

Eu faço minha parte: sigo os standards, e nego suporte até onde posso. Mas se você ainda não pode abandonar esse “aposentando browser”, e fez tudo seguindo os standars e testando apenas no Firefox, e na hora de rodar no windows liso (padrão de fábrica), você deve estar procurando ajuda agora. Infelizmente, ainda não podemos apenas abandonar os browsers da Microsoft, pois detem uma boa parte do público, mas podemos tomar algumas medidades “mágicas” que vão tornar o convívio mais pacífico. Vou deixar algumas dicas que podem poupar, e muito, seu tempo no projeto atual e permitir que você estude alguma coisa bem legal! Vamos lá

Doctype

Certo, se você seguiu os standards, não deveria ter esquecido isso, mas pode acontecer. Então, se você terminou o layout do html que renderiza bonitinho no FF (FireFox) mas não fica bom no IE6 (e provavelmente nos demais IE’s também), verifique se seu arquivo .html tem um cabeçalho parecido com esse:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Isso fará com que os browsers renderizem o HTML de acordo com o que você programou, e não conforme eles pensam ser o melhor jeito. Veja aqui nesse link uma lista completa de DOCTYPES que estarão de acordo com o que você programou. Isso ajuda a resolver alguns problemas bizarros, como quando o browser parece renderizar elementos fantasmas, como labels repetidos e texto sujo na tela (principalmente se você o gera usando javascript. Também já resolve boa parte dos problemas de layout decorrente de má interpretação de CSS.

Javascript

Não preciso nem dizer que usar frameworks como jQuery para programar seu Javascript é essencial num mundo cross-browser. Deixe para ele todas aquelas minúcias de cada browser. Exatamente, alguém, já esquentou a cabeça e perdeu vários fios de cabelo para que você pudesse ter noites melhores de sono.

Mas vou deixar uma dica aqui sobre um erro muito, mas muito chato mesmo. Chato porque esse é um erro comum, mas que passa desapercebido nas primeiras revisões que você faz no seu código. Esquecer as vírgulas nas definições de objetos. Tudo funciona muito bem no FF, porém, coisas estranham acontecem quando você roda no quase-defunto IE6. Quando você definir um objeto javascript:

var objeto = {
    atribute1: value1,
    atribute2: value2,
    atributeN: valueN
}

nunca esqueça de limpar a vírgula do último atributo, ou então, escrever a vírugula separadora de atributos no começo de cada linha:

var objeto = {
    atribute1: value1
    ,atribute2: value2
    ,atributeN: valueN
}

Assim, você evitar deixar a vírgula ali, sempre que copiar o atributo anterior para adicionar um novo irá manter a ordem dos mesmos. E assim, não vai perder várias horas, pois os IE’s raramente vão indicar onde ela está perdida… Esse padrão para atributos é adotado em projetos do EXTJS e em vários outros. Numa primeira olhada, a sintaxe parece estranha, mas te garanto: você vai adorar ter umas horinhas extras para dar aquela atenção ao seu feedreader invés de ter que caçar bugs!

Outro problemas não tão comum, mas que também pega desenvolvedores de surpresa: a instrução for (item in collection). Quando você utiliza a seguinte estrutura:

for (item in array) {
    // suas instruções
}

A sintaxe fica muito mais legível, e as coisas rodam execelentemente… menos no Internet Explorer! Então, tome cuidado, e vá já fazer aquele refactoring esperto para trocar os fors como o de cima pelo for tradicional do javascript.

CSS

Quando você utilizar frameworks CSS (Blueprint, grid960, etc), alguns atributos são resetados (com o quase onipresente reset.css que acompanham o kit de cada framework). Porém, alguns atributos css não são processados como deveriam no IE6 e em seus irmãozinhos. Principalmente o border-colapse, para as tabelas. Então, quando seu layout parecer estar de ressaca, tente setar o border-colapse: 0; antes de arrancar mais cabelos. Outra coisa que ajuda bastante na hora de adaptar CSS ao IE, é usar um seletor de ID invés de classe/elemento, principalmente quando se trata de elementos de formulários. Dê um nome exclusivo ao campo/input, e a chance dele renderizar corretamente no seu IE.

Cuidado com os efeitos! Lembre-se que no IE, os valores para opacity são valores entre 0 e 100,  e não entre 0 e 1.0 como na definição padrão (mais uma vez, um tiro contra os padrões e regras de boa vizinhança na Web).

E quando nem tudo tiver jeito

Bom, você que usa bastante a internet já deve ter percebido que muitos do grandes sites e redes já sabe da morte do browser, e convida os usuários a abandonar o barco antes que ele afunde, mostrando uma mensagem do tipo “É necessário atualizar seu navegador”, conforme a do Facebook, que você encontra clicando na imagem ao lado. Recomendo a você fazer o mesmo, pois algumas vezes não há erros, nem warning,s nem EXPLICAÇÕES! Seu sistema simplesmente não vai funcionar no IE6 (ou parecer um zumbi) simplesmente porque ele (ou seus criadores) não quiseram que funcionasse por tanto tempo assim. No meu último projeto, há uma função que não gera nenhum erro de processamento ou script, mas simplesmente não executa, misteriosamente sendo apenas mais uma instrução como todas as outras anteriores. Não vou ficar gastando o dinheiro de meu cliente! Vamos logo abandonar o defunto do IE6, e concentrar nossos esforços em trazer mais funcionalidades e compatibilidade. Coloque uma bela mensagem  convidando seus queridos usuários a usar um broser mais atual ou melhor.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">