Javascript - Apresentando seu aplicativo com o Shepherd

Em certas ocasiões, você tem uma tela muito complexa em seu aplicativo web/mobile onde o usuário pode ficar facilmente perdido em meio à um grande volume de informações e campos que aparecem para ele. Criar telas intuitivas pode ser trabalhoso ou às vezes não é o suficiente.

O shepherd.js pode ajudar você a resolver este problema! Ele permite criar uma apresentação ou um pequeno "help" de seu app. Ele faz isto através de tooltips destacados na tela, onde você pode informar para que cada sessão serve ou o que deve ser informado em determinado campo. Veja uma demonstração clicando neste link.

Este post mostra como criar uma apresentação de tela quando o usuário a acessa pela primeira vez.

Ruby - Criando uma API REST com o Sinatra

O Sinatra é um framework para a linguagem Ruby utilizado em aplicações simples que não necessitam de tantos recursos como o Rails. Ele é ideal para criar pequenas aplicações web e APIs REST.

Em poucos instantes você pode criar um servidor que responda a uma requisição HTTP. Por exemplo:

 require 'sinatra'  
   
 get '/hi' do  
  "Hello World!"  
 end  

Executando o arquivo acima, um servidor em sua máquina estará respondendo Hello World ao acessar http://seu_endereço/hi no navegador.

PHP - Twig

Quem trabalha com PHP há algum tempo provavelmente conhece algum sistema de templates (template engines). Estes fornecem uma maneira fácil e prática de separar o código responsável pela lógica e o HTML (camada de apresentação). Esta separação torna a manutenção menos custosa, principalmente quando os programadores frontend e PHP não são os mesmos profissionais.

Existem inúmeras template engines disponíveis. O Twig se destaca por ser rápido, flexível, seguro, fácil de dominar e de sintaxe amigável. Este post mostra como criar seu primeiro template com o Twig.

Javascript - DOM Image Object

Para cada tag <img> em uma página HTML, um Image é criado. O objeto document possui a lista de imagens inseridas no documento.

 document.images  

Instâncias deste objeto podem ser inseridas no DOM para exibir imagens dinamicamente, assim como manipular seu estilo. Este post possui três técnicas que podem ser úteis em um projeto web:

- Obter largura e altura de uma imagem;
- Abrir imagens codificadas em base64;
- Abrir imagens pela url e obter a mesma codificada em base64;

Javascript - Bloquear abertura de página em um iframe

Eu estava navegando no The David Wash Blog quando me deparei com um snippet interessante! Trata-se de um código em javascript que bloqueia a abertura de um documento web dentro de um iframe.

Talvez você não queira que seu site/aplicativo seja aberto dentro de um frame por motivos de segurança, ou talvez você não ligue para isto. De qualquer forma, é interessante vê-lo funcionar.

 <script>  
  if (top.location != self.location) {  
   top.location = self.location.href;  
  }  
 </script>  

HTML5 - Web Speech API

A Webspeech API foi introduzida no final de 2012 e permite aos desenvolvedores criarem um aplicativo que reconheça a voz do usuário e traduza suas falas em um texto. O Chrome foi o primeiro navegador a implementar tal recurso que atualmente pode ser utilizado também no Safari, Opera e Firefox.

Neste post, você encontra um exemplo de implementação.

HTML5 - Criando apps nativos para Android utilizando Apache Cordova

O Apache Cordova é mais conhecido por sua distribuição chamada Phonegap. Com o Apache Cordova você pode programar aplicativos utilizando as tecnologias: HTML + CSS + Javascript e transformá-lo um aplicativo nativo para diversas plataformas como Android, IOS, Android, Blackberry e Windows Phone. Além disso, existem plugins que permitem utilizar recursos como câmera e acelerômetro do dispositivo.

Mais detalhes sobre a plataforma em: https://secure-software.intel.com/sites/billboard/sites/default/files/downloads/SP12_SFTS004_103_PORpm.pdf

Este post mostra como utilizar o apache cordova para criar uma aplicação nativa android programando em javascript e utilizando HTML + CSS.

Produtividade - Devdocs.io

Muitos programadores quando não recordam o nome de um método ou mesmo o que faz certa função, recorrem ao google ou a qualquer outro site de busca. Neste site eles digitam o nome ou o que querem que o método faça e vasculham a primeira página de resultados em busca de alguma explicação válida.

Uma maneira fácil e eficiente de pesquisar documentações sobre sua linguagem favorita é utilizando o devdocs.io.

Basta abrir o site, clicar em "Select documentation", selecionar as linguagens que você utiliza, clicar em "save", esperar baixar a documentação e pronto!

Digitando o nome da função desejada em search você pode encontrar a explicação que precisa na hora!

CSS - Triângulos

É possível desenhar triângulos em uma página web utilizando apenas CSS. Eles são úteis para criar tooltips, setas, menus e etc.

PHP - Manipulando imagens com o Image Workshop

O Image Workshop é uma classe php open source para manipulação de imagens. Com ela você pode criar códigos pequenos e legíveis para inserir marcas d'água, salvar miniaturas, fazer recortes e trabalhar com layers.

Os resultados podem ser salvos em arquivos ou apenas retornar a imagem para ser apresentada no navegador. As imagens editadas são salvas em jpg ou png.

CSS - Pré-processador LESS

Utilizar pré-processadores CSS traz muitas vantagens como criar variáveis, mixins, operações matemáticas e herança de uma forma mais prática. Basicamente, as regras de estilo são escritas nesta linguagem e o pré-processador converte estas regras para o CSS nativo. O Sass é o mais conhecido e utilizado entre estes.

Uma boa alternativa ao Sass é o LESS que é escrito em NodeJS e pode ser utilizado tanto no lado do cliente importando um arquivo javascript quanto no lado do servidor compilando o arquivo less.

O LESS pode ser instalado via NPM e possui uma boa documentação traduzida para o português.

HTML5 - Aplicações web offline

Um novo recurso que é possível implementar nos navegadores modernos é o de cache de aplicações, chamado de Offline Application ou Application cache. Este recurso permite definir quais arquivos carregados em uma página devem ficar salvos no cliente. Uma vez salvos, é possível acessar a página ou aplicativo mesmo não estando conectado á internet.

Além de criar sites mais rápidos, as aplicações offline permitem atender a um grande requisito das aplicações mobile: Um sistema que dê acesso aos dados salvos mesmo estando em um local sem rede.