Introduza o termo a pesquisar e clique Enter.

Tag: programação

Anime Timeline V2

Set 11 09

Escrito por Luis Nabais @ 09/09/11 22:09 | 3 Comentários »

Anime Timeline Logo

Demorou mas consegui. Finalmente posso dizer que tenho uma aplicação escrita em Node.JS a funcionar e disponível para quem a quiser experimentar. Para além da utilização de CouchDB para guardar os dados (como já fazia há algum tempo na versão anterior escrita em PHP) posso também atirar para a fogueira mais umas buzzwordzitas uma vez que em vez de usar grandes bibliotecas como o jQuery e outros acabei por ficar pelo Ender, uma ferramenta que permite conjugar as mais variadas micro-frameworks de Javascript num único pacote.

Outro pormenor curioso são as animações. A biblioteca que estou a usar, a morpheus, baseia-se numa API recente disponivel nos mais diversos browsers chamada requestAnimationFrame. O que é que tem de especial esta API? A API serve para pedir aos browsers quando é que eles estão disponíveis para fazer a próxima frame da animação o que significa que por exemplo quando o browser se encontra minimizado ou o CPU sobrecarregado o browser pode escolher não disponibilizar tempo para processar a animação e esta passa logo para o final poupando ciclos de CPU e consequentemente energia.

Isto tem no entanto alguns problemas: a API ainda não está em muito bom estado e consequentemente é normal logo após carregar a página serem notórios os saltos devido ao numero reduzido de frames disponibilizadas pelo browser (no chrome cheguei ao ridículo de ver apenas 3 frames disponíveis numa animação). Curiosamente onde as animações correm melhor é em Internet Explorer 9. Sim eu sei, o inferno deve ter acabado de congelar.

No entanto nem tudo está concluído. Neste relançamento ficaram de fora ainda algumas funcionalidades que tinha programadas como o uso da API de historia do HTML5 para permitir navegar no site sem ter de refrescar as páginas e também melhorar o suporte a tablets como o iPad ou as muitas baseadas em Android Honeycomb como a Galaxy Tab ou a Asus Transformer. Isto sem mencionar o facto de ser preciso colocar um botão do Google Plus mas isso é só quando a API finalmente sair.

Para já fica só o reescrever da grande maioria do código que está agora muito mais pequeno e versátil. Uma das grandes diferenças que devem ser imediatamente notórias é na sincronização com o servidor que agora não só efectivamente funciona em mais do que um browser cumprindo o seu propósito (sim, estava assim tão mal) como não tem tantos popups irritantes sempre que ocorre e deve ser rápida o suficiente para nunca serem apanhados desprevenidos por fecharem o browser antes dela acontecer.

AH e mais importante que tudo isto é a mudança de endereço.

LINK: http://anime.nonsensebb.com

Qualquer critica, duvida ou sugestão façam favor de dizer de vossa justiça nos comentários.

Dia do Orgulho Geek

Mai 11 25

Escrito por Luis Nabais @ 25/05/11 22:05 | 8 Comentários »

Hoje dia 25 de Maio marca uma data importante. Não, não estou a falar do igualmente importante Dia da Toalha ou do Primeiro Dia Internacional do Planking (que descobri ao procurar sobre o dia de hoje na wikipedia para escrever este paragrafo) mas sim do Dia do Orgulho Geek. Como tal achei que era uma ideia interessante fazer o mesmo que a malta do Ars Technica¹ e tentar explicar o que é que me fez enveredar por este caminho da geekosfera.

Continuar a ler esta entrada >>

Anime Timeline

Abr 11 28

Escrito por Luis Nabais @ 28/04/11 2:04 | 2 Comentários »

Anime Timeline

Há uns tempos atrás decidi colocar-me a brincar um pouco com o editor de imagem, depois com o editor de texto e ficheiros html/css e no fim javascript e php para uns últimos pozinhos resultando num pequeno website onde listo as séries de cada temporada de animação japonesa, uma timeline de animes. Dava jeito por motivos que na altura citei e deu também para dar um pouco de liberdade à minha criatividade no que toca ao “design de sítios web”.

Pois bem a verdade é que a brincar a brincar e sem grandes tentativas de promoção a coisa até pegou e transformou-se na 2ª/3ª pagina mais visitada do meu site com a grande generalidade das visitas a virem de pesquisas do google por isso achei que era boa ideia polir um pouco as arestas ao bicho e é disso mesmo que venho aqui falar hoje.

Continuar a ler esta entrada >>

JSON/HTML/XML – Qual devolver?

Nov 10 16

Escrito por Luis Nabais @ 16/11/10 21:11 | 2 Comentários »

Bem este post vai servir não só como uma forma rápida de apanhar algumas opiniões como também para ficar com uma nota para mim próprio sobre esta ideia.

Para o meu TV Wall estou a tentar ir o mais longe possível no juntar da API da aplicação com o que efectivamente é visível para os utilizadores e parte disso passa por tentar ter praticamente o mesmo esquema de URLs tanto para o browser como para a API utilizada pelos mais diversos clientes (quer seja a própria aplicação web em javascript ou outra qualquer hipotética aplicação nativa). Isto faz com que os endereços se tornem por exemplo em algo como /show/house para aceder, neste caso, à pagina associada à série House.

Agora o desafio: como fazer o mesmo endereço devolver HTML para um browser mas JSON (ou XML ou qualquer outro formato de dados) para uma aplicação? A minha resposta passa pelos cabeçalhos HTTP, mais concretamente pelo cabeçalho ACCEPT que ao anunciar que aceita um determinado tipo de dados permite-me devolver-lhe esse tipo em particular deixando o HTML normal para fallback.

Claro que eu posso já começar a ver os problemas associados a esta abordagem: e se surgir um browser que manda um cabeçalho a dizer aceitar application/json quando o que o utilizador quer mesmo receber é a versão HTML? E se um cliente enviar no cabeçalho que aceita tanto JSON como XML? Qual dos dois devolver? Sim, isto são tudo questões muito validas e é por isso mesmo que coloquei esta entrada no meu blog. Opiniões?

Onwards for Codebits 2010

Nov 10 10

Escrito por Luis Nabais @ 10/11/10 22:11 | 2 Comentários »

Codebits IV E é já amanhã que começa a quarta edição do Sapo Codebits.

Pizza, Red Bull, muito código no concurso de programação em 48h, quiz show (que planeio vencer desta vez) e muitos workshops e apresentações para aprender de tudo um pouco relacionado com tecnologia em geral e web em particular.

É o “Rock in Rio geek” como alguém disse no twitter e eu vou lá estar a dar o meu melhor para aproveitar novamente ao máximo tudo o que se passa no evento. Em edições passadas fui evangelizado para o uso de microformatos ou para a fantástica ideia de usar javascript no servidor e desta feita espero ver ainda mais buzz em torno desta ultima pois a meu ver é sem sombra de duvidas o futuro da web.

Vão dando noticias no twitter e se me virem por lá não se esqueçam de pedir um autocolante do TV Wall. 😉

One small step for me

Nov 10 09

Escrito por Luis Nabais @ 09/11/10 21:11 | 1 Comentário »

TVWall Code Bem isto realmente pode não parecer muito emocionante e até excessivamente lento para a maioria mas a minha vida tem andado tão caótica ultimamente que mesmo este pequeno avanço me deixa bastante entusiasmado.

Como certamente sabem tenho andado a brincar com um pequeno website cujo único factor particularmente distinguível é, perdoem-me a modéstia, o design. Agora este post serve apenas para dizer que dei hoje finalmente os primeiros passos para o rewrite que tenho andado a planear e que deve finalmente tornar a aplicação utilizável no dia a dia.

Ficou finalmente funcional a primeira chamada da futura API do TV Wall (sim, vai existir uma API) e apesar de ainda faltarem alguns detalhes (como por exemplo uma forma de autenticação) é já uma conquista para mim conseguir ter posto a funcionar um pedido a um serviço externo e respectiva cache local em CouchDB.

Com isto tenho vindo a habituar-me ao conceito de programação por eventos o que leva a casos curiosos em que passo um bom bocado a tentar perceber porque é que este código não funciona apesar de ao inspeccionar o objecto o método ser claramente visível.

if (db.table.exists()){}

A resposta é simples quando se começa a compreender a linguagem (se bem que um pouco de documentação teria ajudado neste caso): o método é assíncrono pois vai questionar uma base de dados externa logo a forma correcta de o fazer é deixando um callback que vai ser chamado quando ela responder.

db.table.exists(callback = function(result) {
    if (result) {
        // Exists
    } else {
        // Does not exist
    }
});

Como podem ver isto não é propriamente das coisas mais simples de se usar para programação mais convencional em que estamos dependentes do resultado mas para programar na web onde temos de responder a múltiplos pedidos simultaneamente e estamos dependentes dos mais diversos pontos de latência este tipo de lógica trás teoricamente vantagens interessantes para a performance do sistema.

Node.js não é propriamente simples e está bastante longe de estar maduro mas promete bastante na minha modesta opinião e acho que é uma boa aposta para o futuro próximo da web.

PS: acho que é a primeira vez que mostro aqui o novo logótipo do TV Wall. O que acham?

Dia do Programador

Set 10 14

Escrito por Luis Nabais @ 14/09/10 0:09 | 1 Comentário »

Acabou de me chegar à atenção este pequeno acontecimento por terras russas e não podia deixar de o partilhar aqui.

Aparentemente ontem, dia 13 de Setembro, celebrou-se o primeiro Dia do Programador na Russia depois de ter sido ratificado como feriado pelo presidente Medvedev apenas dois dias antes.

Pelos vistos um empregado de uma empresa de Web Design achou que seria engraçado passar uma petição para tornar o 256º dia do ano (0x100 em hexadecimal ou 2⁸) num feriado dedicado a essa nobre profissão que é ser programador. Agora fica o desafio: e que tal o mesmo cá em Portugal, eu por mim agradecia o gesto. 😉

Link: Programmer’s Day @ Wikipedia

Os misteriosos 3px em css

Ago 10 14

Escrito por Luis Nabais @ 14/08/10 23:08 | Sem Comentários »

Eu tenho andado a trabalhar em correcções e melhorias do código HTML/CSS do meu TV Wall já há uns tempos para me permitir fazer coisas ainda mais awesome (como drag & drop por exemplo) mas noutro dia deparei-me com um comportamento curioso da renderização de css que me demorou algum tempo até compreender o seu porquê (e na verdade ainda só tenho uma teoria não comprovada).

O problema em questão é o seguinte. Notem a imagem seguinte:

Isto é a típica composição de uma “parede” no TV Wall. Cada um dos rectângulos na imagem é uma célula contida em caixas maiores marcadas a castanho e possuindo cada uma destas ultimas display: inline-block;. Esta organização é uma necessidade por forma a permitir não só que os tamanhos das células sejam variáveis como também para as organizar nas diversas formas pretendidas e ainda para permitir que a parede cresça consistentemente em vez de crescer até ao limite da largura antes de passar para a linha de baixo.

O problema coloca-se com a pequena linha a branco que podem ver na imagem. Cada uma das caixas a castanho é suposto possuir 40em de largura e não possuir qualquer margin ou padding (por questões de consistência que auxiliam nas operações que planeio fazer em javascript) no entanto na realidade todas as caixas possuíam uma “margem” invisível de 3px à sua direita.

Na realidade isto não é nenhuma margin ou padding mas sim uma propriedade chamada de letter-spacing que por defeito no Firefox e no Chrome possui o valor de, lá está, 3px! Porém não consegui corrigir o problema alterando esta propriedade no antecessor das minhas caixas, simplesmente ficava tudo na mesma. A solução passa por algo infinitamente mais simples: colocar cada uma das caixas com float:left; display: block; e presto, os 3px desaparecem e a previsibilidade regressa.

O facto do letter-spacing ser a causa desta situação é apenas uma conclusão a que cheguei visto estar a usar inline-block em vez de um simples block + float como devia ter feito desde o inicio efectivamente complicando a minha situação. Fica no entanto o aviso para outros que possam estar a encontrar o mesmo problema e já agora se eu me tiver enganado na minha conclusão façam favor de me avisar.

pub: