bower_header

A quebra do build automático e o Bower no meio do caminho

Quem usa algum esquema de integração contínua como o Jenkins por exemplo, sabe que é horrível ter a foto do Chuck Norris e saber que foi você quem quebrou o build.

O Bower geralmente é o culpado, acontece isso sempre e tem acontecido comigo nos últimos 9 builds gerados em um dos softwares que estamos fazendo.

Qual a principal causa disso?

Bom, acontece quando nós usamos diversas bibliotecas, componentes de terceiros e vem com diferentes versões do software principal que você está usando, por exemplo: Angular, JQuery e faz o Jenkins quebrar, já que o bower fica sem saber qual versão instalar.

+ bower install --silent
bower                        ECONFLICT Unable to find suitable version for angular
Build step 'Execute shell' marked build as failure
Finished: FAILURE

Mesmo eu tentando colocar via –silent, ele ignora e continua quebrando o build.

Entendendo o caso:

O Bower tem uma configuração para lá de prática e acabei descobrindo isso na quebra do build, ele possui uma conversão chamada “resolutions”, onde força você à usar a versão que você realmente quer.

{
  "name": "Seu Produto",
  "version": "0.0.1",
  "dependencies": {
    "angular": "1.2.16",
    "json3": "~3.2.6",
    "es5-shim": "~2.1.0",
    "jquery": "~2.1.1",
    "jQuery-Mask-Plugin": "1.6.4",
    "jquery-ui": "~1.10.4",
    "bootstrap": "~3.1.1",
    "angular-resource": "1.2.16",
    "angular-cookies": "1.2.16",
    "angular-sanitize": "1.2.16",
    "angular-route": "1.2.16",
    "angular-animate": "~1.2.16",
    "angular-collection": "~0.5.0",
    "angular-bootstrap": "0.11.0",
    "angular-strap": "~2.0.2",
    "momentjs": "~2.6.0",
    "ng-grid": "~2.0.11",
    "textAngular": "~1.2.1",
    "fontawesome": "~4.1.0",
    "angular-ui-utils": "~0.1.1",
    "cpf_cnpj": "~0.0.3",
    "angular-intro.js": "~1.1.2"
  },
  "devDependencies": {
    "angular-mocks": "1.2.16",
    "angular-scenario": "1.2.16",
    "angular-ui-utils": "~0.1.1",
    "jquery-ui": "~1.10.4"
  },
  "resolutions":{ "angular": "1.2.16" }
}

O “resolutions” acaba configurando implicitamente a versão do software que você quer e isso por final evita a quebra do build e o Chuck no telão na sala de desenvolvimento.

angular_header

AngularJS e filtros Brasileiros

Acabei de publicar no github um projeto bem simples e ao mesmo tempo bastante comum a tal da formatação de certos campos como, cnpj,cpf, cep e por ai vai no ramo Brasileiro.

Querendo ou não você vai encontrar esse pequeno problema no ramo uma vez ou outra na vida.

Como eu precisei e não achei nada no mercado, acabei fazendo os meus e para ninguém mais sofrer com esse problema, é só usar esses filtros.

Como usá-lo?

Instalando via bower

$ bower install ng-filters-br

Depois de executar só colocar dentro dos módulos de sua aplicação:

var app = angular.module('myApp', ['ngSanitize','brasil.filters']);

Aplicando o filtro de formatação quando necessário

É só colocar:

{{value | nome do filtro}}

Exemplo abaixo:

    <h3>Filtros valores reais brasileiros</h3>
    <p ng-repeat="value in moedas">{{value | realbrasileiro}}</p>
    <h3>Filtros para CPF</h3>
    <p ng-repeat="value in cpfs">{{value |cpf}}</p>
    <h3>Filtros para CNPJ</h3>
    <p ng-repeat="value in cnpjs">{{value |cnpj}}</p>
    <h3>Filtros para CEP</h3>
    <p ng-repeat="value in ceps_br">{{value |cep}}</p>
    <h3>Filtros para Telefones SP</h3>
    <p ng-repeat="value in tels_sp">{{value |telefone_sp}}</p>

Quem não estiver usando o Bower

Para utilizar sem o bower, basta copiar os arquivos na basta dist, seja minificado ou normal. Vai de sua escolha.

Sugestões, reclamações. Só fazer um fork, criar pull-requests ou abrir uma issue caso você não consiga fazer um pull-request.

awhCbhLqRceCdjcPQUnn_IMG_0249

Inovar significa criar espaço para falhas

Faz até sentido você falhar, assim é possível se re-criar e inovar nas áreas onde você se considera frágil ou imperfeito.

A perseverança é a palavra chave para inovar. Em todas as áreas que você vive, usar outra rua que não seja a mesma que você está usando, recriar um produto do zero, aprender com o passado e com seus erros e falha.

Eu achei um vídeo muito massa que compartilha e contempla todos esses aspectos relacionados à inovação. Ben Shaffer trabalha para Nike e ele sintetiza tudo isso que eu sempre achei que fosse possível.

No nosso ramo de software, você acaba não se apegando a essa parte e acaba esquecendo que o mais rápido é o melhor.

Tem muita frase de conceito e de peso na hora que você decide inovar, especialmente o “Agora não dá”, “Deixa para uma próxima versão”, a clássica “Faz assim que é fica mais rápido, depois melhoramos isso” ou a pior de todas “Tem o fulano que faz mais barato”.

A única forma de inovar que vem à cabeça quando você se depara com isso é uma frase nova para mandar o sujeito lá para aquele lugar. Embora os ânimos se exaltem nesses momentos onde nossa paciência mais pena, é onde você pode tirar proveito da situação, inovar até se encaixa em dar uma resposta melhor aquilo que você faz de pior.

Volto ao velho post onde eu já escrevi sobre o assunto, vale a pena passar por esse link e lê-lo novamente.

#Simplicidade

#Falhar sempre

#Ser inquieto

#Inovar é fazer mesmo que seja do jeito errado.

flashccnext2014

Flash Pro CC Next 2014 – Exportando para SVG e WebGL

Nada é desperdiçado hoje em dia, inclusive o Flash Pro CC, a IDE que era muito útil até meados de 2011.

Hoje ela renasceu com um novo propósito, suporte total ao HTML5, CSS3, Javascript desde sua versão inicial do CC, só que agora ela vem com duas novas funções que vão de encontro a sua necessidade.

Criar animações em Flash, como você estava acostumado e exportar para WebGL.

Quais os benefícios disso?

Criar animações que não dependem do Flash Player, rodando direto no navegador como Firefox ou Chrome.

O Flash tem melhorado muito, essa última versão mesmo tem muita coisa relacionada ao suporte completo do Canvas.

Quem diria eu escrever um post sobre o Flash em pleno 2014. Os tempos estão mudando e ponto positivo para Adobe.

visual_studio_cordova

Apache Cordova ganha um forte aliado Visual Studio 2013 Update 2

A Microsoft, em especial seu time Web/Mobile tem me surpreendido absurdamente para o lado positivo.

O Time mobile da Microsoft estava em constante suporte ao Cordova desde 2011 com a possibilidade de criar Apps apoiando a iniciativa com o uso do Cordova para criar apps HTML5, CSS3 e Javascript embutidos junto ao Cordova como apps híbridas.

Hoje ela acaba de dar mais uma força absurda para o Cordova, suportando nativamente o Cordova no Visual Studio 2013 Update 2.

Quem possui o Visual Studio 2013 e quer atualizar para dar suporte, só baixar o Update 2 para sua felicidade.

A combinação WinJS com Cordova, é um grande avanço da parte da Microsoft, tirando ainda o suporte nativo ao C# com a plataforma Xamarin.

Hoje basicamente a Microsoft é a única empresa onde o suporte a tecnologias Open Source tem crescido à largos passos.

angular_header

Usando o Google Charts com AngularJS

Se você já tentou usar o Google Charts junto com uma aplicação Angular, você acaba de esbarrar no primeiro problema relacionado à compatibilidade do AngularJS.

Geralmente quando você injeta o escopo do Angular no html, você faz dessa maneira.

<html class="no-js" lang="pt-BR" ng-app="SeuApp">

O problema que a Biblioteca do Google Charts ou melhor, Google Visualization Library carrega um pouco atrasada ao comparada com a introspecção do DOM com o AngularJS, por que ela além de ser carregada dinamicamente de outro domínio, você ainda tem que esperar ele criar o objeto e assim fazer o parse dentro de um controller.

Acaba dando o seguinte erro.

 
Uncaught Error: [ng:btstrpd] App Already Bootstrapped with this Element '<body>'
http://errors.angularjs.org/1.2.16/ng/btstrpd?p0=%3Cbody%3E

Resumindo bem a história, você tem que esperar fazer o download da lib para máquina do cliente, e então só assim você pode usa-lá. Ah! Nem adianta você tentar baixar a biblioteca e rodar de forma off-line como lib em seu domínio, isso vai contra as regras de distribuição do Google e você(sua empresa) pode acabar se dando mal. Já que é contra os termos de uso.

Como fazer então?

Primeiro passo é remover o tag ng-app que define o escopo da sua aplicação no html principal.

Segundo passo, adicione o script do Google Charts em sua aplicação antes da inclusão do script do angularjs ou jquery, por exemplo.

<script src="https://www.google.com/jsapi" type="text/javascript"></script>

Terceiro passo, inclua a declaração da sua aplicação no loadCallBack(), que é o método usado pelo Google Charts para avisar que está pronto para ser utilizado.

/*global google*/
 
'use strict';
var app;
 
google.setOnLoadCallback(function() {
    angular.bootstrap(document.body, ['seuApp']);
  });
 
google.load('visualization', '1', {packages: ['corechart']});
 
var app = angular.module('seuApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute',
  'ngAnimate',
  'ngCollection',
  'ngGrid',
  'seuApp.services'
]);

Você fica acaba de ficar livre de um pequeno problema que facilmente você verá soluções utilizando directivas do Angular, ao invés de utilizar a própria lib em si.

Google Charts, não é uma preferência pessoal, é uma necessidade, já que imita muito as famosas Flex Charts, que tanto utilizei em diferentes BI por ai, a única forma que seria chata é justamente essa de esperar carregar.

Só que se me perguntarem qual solução de fato você usaria para documentos com gráficos, eu diria que a D3js.org seria minha preferência de imediato, já que me deixa totalmente livre do eixo x,y e explorar formas mais diversificada dados.

apache_cordova

Plugins oficiais do Cordova “Phonegap” atualizados

Para quem está com os plugins instalados e quer atualizar para as últimas versões, segue aqui a lista de atualizações, onde ocorreu muitas mudanças e correções de bugs.

org.cordova.battery-status@0.2.8
org.cordova.camera@0.2.9
org.cordova.console@0.2.8
org.cordova.contacts@0.2.10
org.cordova.device@0.2.9
org.cordova.device-motion@0.2.7
org.cordova.device-orientation@0.3.6
org.cordova.dialogs@0.2.7
org.cordova.file@1.1.0
org.cordova.file-transfer@0.4.3
org.cordova.geolocation@0.3.7
org.cordova.globalization@0.2.7
org.cordova.inappbrowser@0.4.0
org.cordova.media@0.2.10
org.cordova.media-capture@0.3.0
org.cordova.network-information@0.2.8
org.cordova.splashscreen@0.3.0
org.cordova.statusbar@0.1.5
org.cordova.vibration@0.3.8

Para instalar é simples:

phonegap plugin add org.cordova.{NOME DO PLUGIN}

Se quiser sobrepor o atual só remover o que tem e instalar o novo, bem assim:

phonegap plugin rm org.cordova.{NOME DO PLUGIN}
phonegap plugin add org.cordova.{NOME DO PLUGIN}

Para você ver outros plugins disponíveis basta acessar o site oficial : http://plugins.cordova.io

A lista de bugs corrigidos você pode verificar aqui.

phonegap_app

Phonegap App, um live reload para desenvolvedores

Acabaram de lançar o PhoneGap App. Um aplicativo que permite você testar o aplicativo que você está fazendo, sem se preocupar nesse período em assinar, empacotar e testar o que você faz.

Para quem é desenvolvedor Front-end e conhece o benefício do Live Reload, é basicamente a mesma coisa, facilita para caramba na hora de testar enquanto desenvolve.

Como usar?

Primeiro passo

Baixe o Phonegap ou atualize para última versão.

Depois instale o Phonegap como global.

  npm install phonegap -g
Se você não tem ainda o phonegap ou Apache Cordova como é conhecido, você deve instalar primeiramente o NodeJs que vem acompanhado do NPM (Node Package Manager), para baixar o nodejs, vá até o site nodejs.org

Segundo passo

Acesse o Phonegap App e baixe o aplicativo para seu dispositivo Android ou iOS, para Windows Phone em breve será disponibilizado.

Terceiro passo

Com o aplicativo instalado em seu dispositivo e o phonegap já configurado começe com os seguintes comandos:

Se você não tem aplicativo, basta executar esses passos.

c:\ phonegap create MeuAplicativo
c:\ cd /MeuAplicativo
c:\MeuAplicativo/ phonegap serve

Se você já tem aplicativos, só executar assim:

c:\ cd /MeuAplicativo
c:\MeuAplicativo/ phonegap serve

O código fonte tanto do PhoneGap, assim como dos PhoneGap App e o site, estão disponíveis aqui

apache_cordova

Apache Cordova, removendo os 300ms de delay entre o toque e o click

Desenvolver apps Híbridas sem a ajuda de um framework que mitigue todas as particularidades nas plataformas é um caso de dependência de várias técnicas, se você está nesse campo à um bom tempo, sabe que essa tarefa as vezes depende muito de bibliotecas e pequenos scripts em Javascript para fazer funcionar de uma forma nativa.

Um dos problemas enfrentados é o famoso Delay dos 300ms, esse problema afeta tanto apps híbridas como as feitas em Titanium, Cordova, etc, como os “site-apps” nos navegadores.

Quando eu começei a criar um aplicativo chamado Gui Brasil em Cordova(Phonegap na época), 2012. Apresentava esse problema, dando uma aparência de lentidão e quebrado, coisa que tirava toda a experiência de se criar algo ao estilo nativo. Na época eu resolvi com algumas técnicas relacionadas a CSS, melhorou, mais não tanto quanto essa solução que vocês vão ver abaixo.

O FastClick resolve esse problema, especialmente relacionado ao errinho do web-kit em dispositivos que tenham navegadores que usam ele como base, assim como o Webkit(WebView) do Apache Cordova.

Antes de chamar qualquer biblioteca no Cordova, você deve esperar o evento “deviceReady”

Inclua o FastClick na dependência do seu projeto.

<script type='application/javascript' src='/path/to/fastclick.js'></script>

E em seguida inclua essa linha abaixo:

window.addEventListener('load', function() {
    FastClick.attach(document.body);
}, false);

E como em um passe de mágica, sem precisar melhorar nada na performance, seu App já ganha de cara uns 10% até 20% de melhoria na responsividade do toque para a execução.

intel-android

Ferramentas Intel para desenvolvedores Android e Windows Phone

A Intel acaba de lançar o Intel INDE, uma ferramenta estratégica ao seu atual SDK e compilador para Android.

O Intel INDE não compila apenas para o Android, compila também para o Windows Phone. A estratégia por trás do INDE é cada vez mais clara que a Intel está querendo abocanhar uma parte desse mercado já que possui mais de duas dúzias de dispositivos Android e Windows usando seus processadores.

Baixem e confira aqui.

Desenvolvimento de software para Web e Mobilidade