terça-feira, 11 de agosto de 2015

JSON no Browser

Opa,

Se vc usa REST e ele retorna JSON... Instale essa extesion do chrome:

https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?utm_source=chrome-app-launcher-info-dialog

Vai mudar suaa vida :D

Ela deixa formatadinho seu JSON... coisa linda!

Obrigado ao Guilherme Ribeiro pela dica!

Abraço!
Adriano Schmidt

domingo, 9 de agosto de 2015

node js - helloworld e um pouco mais

Semana passada comecei a brincar com Node JS.

Fiz um hello-world bem simples e rápido.

Caso queira fazer também, faça clone desse projeto e siga o arquivo README: https://github.com/adrianoschmidt/node-hello-world

Pronto, agora vamos um passo adiante.

No caso do Windows, depois vale à pena instalar mesmo o node (não só baixar o .exe e sim o .msi)

Agora instale o bower e o grunt
npm install -g bower
npm install -g grunt-cli

Baixe esse projeto e siga o README:
https://github.com/adrianoschmidt/seat-map-nodejs

Depois baixe o front-end desse seat-map (bootstrap, angular e grunt)
https://github.com/adrianoschmidt/seat-map-frontend

Qualquer dúvida é só comentar!

Abraço!
Adriano Schmidt

nome de arquivo muito longo no windows

Hoje tentei deletar uma pasta no Windows e aconteceu esse erro:

"Os nomes dos arquivos de origem são maiores do que o tamanho máximo permitido pelo sistema de arquivos."


Esse erro é causado pois o nome do caminho completo do arquivo é muito grande, mais do que o Windows suporta. No meu caso o npm criou umas pastas muito loucas no node_modules e aí gerou esse problema.

Para resolver faça o seguinte:

Alternativa 1) Renomear diretorios
Renomeie alguns diretorios, por exemplo:
Dê:
c:\work\projeto\node_modules\alguma coisa\outra coisa\diretorio com nome grande\mais uns 4 diretorios\arquivo.txt
Para:
c:\work\projeto\n\a\o\d\m\arquivo.txt

Assim o caminho do arquivo fica menor e tá tudo certo.

Alternativa 2) Mapear como unidade de rede

a) Faça uma pasta compartilhada
Você vai na pasta, talvez não na pasta mais interna, mas em alguma no meio do caminho e compartilha ela na rede (Botão direito na pasta > Compartilhar com)

b) Mapeie uma unidade de rede
Depois você tem que mapear essa pasta compartilhada como uma unidade de rede (Botão direito em Meu computador > Mapear unidade de rede > Escolhe a pasta compartilhada)

c) Exclua o arquivo
Ao acessar essa nova unidade (unidade "Z:" por exemplo) você vai conseguir excluir ou mover os arquivos pois agora o caminho completo do arquivo ficou menor.

-------------------

Qualquer dúvida é só comentar aí embaixo!!

Valeeu!!!
Adriano Schmidt

quinta-feira, 6 de agosto de 2015

Grunt com HTTPS/SSL em ambiente de desenvolvimento

Hoje precisei rodar o Grunt com HTTPS para fazer uns testes aqui. Segue o passo-a-passo:

Primeiro crie o certificado. Aqui estou usando o openssl no ubuntu. Se você usa Windows pesquise sobre como criar certificado no windows ( https://www.openssl.org/related/binaries.html )

openssl genrsa -out livereload.key 1024

openssl req -new -key livereload.key -out livereload.csr
(esse comando vai pedir alguns dados... vai preenchendo... Só em "Common Name" coloque "localhost" sem aspas)

openssl x509 -req -in livereload.csr -signkey livereload.key -out livereload.crt

Agora você tem 3 arquivos, copie os livereload.key e livereload.crt para dentro do seu projeto, na mesma pasta do Gruntfile por exemplo.
Eu criei uma pasta chamada ssl dentro da pasta onde está o Gruntfile.

----------------------

No seu Gruntfile no  "watch: {" você tem colocar esse options em todos os lugares que você quer que rode com https (no js, css e no livereload) por exemplo:

        options: {
            livereload: {
              port: 9000,
              key: grunt.file.read('ssl/livereload.key'),
              cert: grunt.file.read('ssl/livereload.crt')
            }
          }

Como ficou meu watch:

   watch: {
      bower: {
        files: ['bower.json'],
        tasks: ['wiredep']
      },
      js: {
        files: ['<%= yeoman.app %>/scripts/{,*/}*.js'],
        tasks: ['newer:jshint:all'],
        options: {
            livereload: {
              port: 9000,
              key: grunt.file.read('ssl/livereload.key'),
              cert: grunt.file.read('ssl/livereload.crt')
            }
          }
      },
      jsTest: {
        files: ['test/spec/{,*/}*.js'],
        tasks: ['newer:jshint:test', 'karma']
      },
      styles: {
        files: ['<%= yeoman.app %>/styles/{,*/}*.css'],
        tasks: ['newer:copy:styles', 'autoprefixer'],
        options: {
            livereload: {
              port: 9000,
              key: grunt.file.read('ssl/livereload.key'),
              cert: grunt.file.read('ssl/livereload.crt')
            }
          }
      },
      gruntfile: {
        files: ['Gruntfile.js']
      },
      livereload: {
     options: {
         livereload: {
           port: 9000,
           key: grunt.file.read('ssl/livereload.key'),
           cert: grunt.file.read('ssl/livereload.crt')
         }
       },
        files: [
          '<%= yeoman.app %>/{,*/}*.html',
          '.tmp/styles/{,*/}*.css',
          '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
        ]
      }
    },


Agora no seu index.html, uma linha antes de fechar o body (</body>) cole isso:
<script>document.write('<script src="https://' + (location.host || 'localhost').split(':')[0] + ':9000/livereload.js"></' + 'script>')</script>

Pronto, ao rodar o "grunt serve --force" tudo estará rodando em HTTPS :)

Mais detalhes em: http://www.gilluminate.com/2014/06/10/livereload-ssl-https-grunt-watch/

Abraço! Qualquer dúvida comenta aí!
Adriano Schmidt

quarta-feira, 5 de agosto de 2015

X-Frame-Options to SAMEORIGIN

Eu estava fazendo um client OAUTH para fazer login via facebook e deu o erro:

Refused to display 'https://www.google.com.br/qualquerUrl' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

Isso é problema de Same Origin Policy... uma política de segurança para evitar que scripts de um site acessem scripts de outro site. Mais em:
https://en.wikipedia.org/wiki/Same-origin_policy

Seguindo nessa linha instalei extensões no google chrome. Pesquisei por "cross domain" e achei várias. Mas não resolveu meu problema.

Iniciei o google chrome passando parâmetros para desabilitar a segurança. No Ubuntu fiz dessa forma:
google-chrome --disable-web-security --allow-file-access-from-files --allow-file-access --allow-cross-origin-auth-prompt
Mas não resolveu meu problema.

Achei que o erro estava acontecendo pois eu estava rodando em localhost ou 0.0.0.0 (estou usando grunt no meu projeto). Então tentei utilizar um DNS. Mas não resolveu meu problema.

Por fim, identifiquei, que minha empresa tinha um servidor de proxy, e por mais que minha máquina estivesse liberada e eu pudesse acessar tudo (pelo menos era o que parecia) verifiquei no network do chrome que o meu OAUTH Client acessava em algum momento a URL http://static.ak.facebook.com e o response vinha com uma página do google, e isso que gerava o erro.

Solução: Desligamos a máquina do proxy, não faz sentido hoje em dia usar isso :D E tudo funcionou perfeitamente \o)

Obrigado ao Herbert Smith e ao Alfredo Zipperer pela força!

Abraço!!!
Adriano Schmidt