26 outubro, 2015

Cortina (overlay) de Loading usando apenas CSS

Neste momento estou trabalhando em um projeto migrando para HTML a parte em Silverlight de um dos produtos da empresa onde trabalho. Esse designer se comunica com a aplicação por meio de web apis, que podem demorar um pouco para responder dependendo do volume de dados e carga do servidor.

Depois de ter trabalhado alguns anos em uma agência eu aderi à filosofia de que código HTML deve ter relevância semântica sempre que for possível, evitando a inclusão de atributos e tags desnecessários ao máximo. Com isso você acaba com um código mais limpo, menor, mais fácil de dar manutenção, mais fácil de alterar visualmente no futuro via css e mais leve de processar no browser.

Quando a aplicação fizer uma chamada para a api que demorar um pouco, eu precisava exibir uma tela de “loading”, mas eu queria fazer isso da forma mais limpa possível. Graças ao pseudo-seletor de css ::after, que eu adoro, eu fui capaz de criar essa tela usando apenas CSS, sem acrescentar nenhuma tag no HTML.

Exemplo da cortina de loading com animação

10 abril, 2015

Build 2015 – Build Tour São Paulo

Build 2015 - São Paulo

A conferência Build é o meu evento técnico preferido, desde que a Microsoft extinguiu o MIX em 2011, mas infelizmente eu não irei para o Build em São Francisco esse ano. Por um lado essa é até uma boa notícia, com a cotação do dollar do jeito que está, mas não tem preço a oportunidade de interagir diretamente com o pessoal da Microsoft e outros profissionais, além de rever velhos amigos, conhecidos e MVPs do mundo todo com quem normalmente interajo apenas por redes sociais e e-mails.

31 março, 2015

Navegacao localhost com Project Spartan no Windows 10

Se você está usando o Preview do Windows 10 então provavelmente estava tão ansioso quanto eu para poder testar logo o Spartan, novo navegador de internet da Microsoft. Ontem (30/03/2015) foi liberado para o grupo FAST o update 10049, contendo a primeira versão pública do Spartan.

Como era de esperar de um desenvolvedor web, a primeira coisa que fui testar foi um site que está hospedado no IIS do meu computador. Para a minha surpresa, a página nao carregou de forma alguma, mesmo estando funcionando normalmente nos outros navegadores instalados no mesmo computador.

Como todo bom beta tester, a primeira coisa que fiz foi relatar este problema para a Microsoft, usando o aplicativo Windows Feedback do Windows 10, detalhando o que eu tentei fazer e inclusive adicionando prints de tela. Como no meu computador de trabalho eu não coloquei o Windows 10 ainda (achei melhor ter pelo menos 1 computador com Windows 8.1, "just in case..."), não tive como continuar testando e só pude voltar a "brincar" quando cheguei em casa.

Após fuçar um pouco eu me dei conta de uma coisa: O Spartan é um aplicativo Metro/Modern/Universal/Windows. Sendo assim ele está sujeito às mesmas restrições de qualquer aplicativo que façamos para a loja. Uma dessas limitações é que esses aplicativos, por padrão não têm permissão para fazer requesições web de loopback, ou seja, requisições para a própria máquina. Isso inclui localhost, "nome-do-computador", entradas no arquivo de hosts local, etc... Este recurso se chama AppContainer e é um mecanismo de segurança dos aplicativos da loja.

Como sou desenvolvedor web, uma ferramenta que uso bastante é o Fiddler, para monitorar e depurar tráfego http de projetos em que trabalho. Acontece que o Fiddler tem uma configuração que nos permite criar excessões de loopback para que aplicativos da loja possam realizar requisições locais.
Para realizar essa configuração basta acessar o menu Tools > Win8 Loopback Exemptions ou clicar na opção WinConfig da barra de ferramentas.

opção WinConfig na barra de ferramentas do Fiddler

Após isso será exibida a tela abaixo, contendo a lista de aplicativos da loja, onde você poderá informar quais estão isentos da restrição de loopback. Agora basta escolher o Project Spartan, salvar a configuração e usar o novo navegador com seu sites locais normalmente. Espero que nos proximos builds do Windows 10, ou pelo menos antes da versão final o Spartan já venha com essa exceção configurada por padrão.

PS.: Uma segunda opção para editar as regras de exceção é o aplicativo open source Windows 8 Loopback Exempltion Manager disponível no Codeplex: http://loopback.codeplex.com/. Se você quiser entender como funciona essa lista de exceção, dê uma olhada no código fonte desse aplicativo.