Tribo do C.I.

Só mais um blog de informática (só que não)

Front in BH 2014: Eu Fui!!!

julho 29th, 2014

Resumo Frontin BH

Obs: este artigo pode ser lido em inglês em: https://medium.com/@sheldonled/frontin-bh-2014-66b5a1178b28

Já tem um certo tempo que estou focando meus estudos em tecnologias front-end, e nada melhor que eventos/conferências/workshops/etc para nos manter atualizados. Quase não estou saindo da terra do pequi para me aventurar em eventos, e percebo que estou fazendo uma média de 1 evento por ano.

Em 2013 fui ao TDC SP (trilha de UX/Front-end), e aprendi muita coisa legal. Pude levar minha esposa, e pude rever meu amigo e sócio deste blog, Relson. Esse ano foi a vez de ir para Belo Horizonte, prestigiar o magnífico FrontinBH. Foi a primeira vez que eu e minha amada fomos para BH, e deu pra curtir bastante esse fim de semana.

Planejamento ft. Ansiedade

Confirmei minha ida aproximadamente um mês antes do evento, porém só na sexta-feira que antecedeu o evento pude confirmar como e com quem eu iria. Convidei alguns amigos para ir ao evento, verifiquei a possibilidade de ir com alguns parentes, mas no fim fomos minha esposa e eu.

Chegamos em BH poucos minutos antes do evento, e ela ficou comigo no início, depois eu a levei ao hotel para descansar enquanto eu enfrentava chuva e a demora do metrô para chegar novamente ao Teatro Ney Soares e perder o início da palestra sobre TrackingJS. Fiquei um pouco perdido na cidade no começo do dia mas após umas caminhadas e com ajuda do GPS eu consegui ir e vir mais tranquilamente.

O Evento

Fiquei admirado com o evento. Ao mesmo tempo que eu estava em um auditório lotado, com centenas de pessoas que eu não conhecia, eu me vi ao lado de grandes mentes, pessoas que estão puxando a web pra frente ‘trocadilho alerts’, pude trocar idéias com pessoas que eu costumava ver no youtube, e tudo isso contribuiu bastante para minha experiência.

O evento nos deixou momentos alegres, como os momentos: “Livraria” e “Oxenti”, e o autor do primeiro pode me dar dicas bem legais sobre o mercado internacional e como treinar Inglês sozinho 🙂 Ele (Michael Lancaster) foi responsável por apresentar à platéia o Node Webkit, uma plataforma de desenvolvimento nativo usando tecnologias conhecidas por nós web developers.

A abertura do evento foi feita pelo incrível Bernard De Luna, uma pessoa já conhecida pelos seus projetos sexys, e a primeira palestra foi sobre frameworks de testes de UI, dos quais, os que mais me chamaram atenção foram: Jasmine, Qunit, Mocha, Buster e Karma. Outra palestra interessantíssima foi a dos caras da RC Comunicação sobre o workflow de desenvolvimento web (Design ?Implementação). Nessa palestra, destacou-se o poder do Webflow.

Como eu disse acima, perdi algumas palestras, pois fui almoçar próximo ao hotel, fazer check-in e guardar minhas coisas. Cheguei no meio da palestra sobre TrackingJS, um framework incrível que possibilita reconhecimento de cor, de face e outras. Perguntei ao Zeno Rocha, na hora do lanche, se eles começaram a desenvolver isso com algum objetivo em mente, e ele me respondeu: “Não, e isso nem tem nada a ver com o nosso trabalho (na Liferay). A gente teve a ideia e começou a fazer”.

Falando em lanche, estava tudo muito bom 😀 e eu pude conhecer pessoalmente, como citei acima, caras que eu só via nas redes sociais. Conversei um pouco com Yamil Asusta, que palestrou sobre o incrível Browserify, uma ferramenta que permite trazer modulos do npm para o browser. Conversei também com o Felquis, sobre várias coisas, principalmente sobre meet ups e workshops.

No final da tarde tivemos as meninas do Github, falando sobre o poder dos Polyfills e o Mathias Bynens falando sobre Unicode no JavaScript. Dentre outras coisas que tiveram no evento e eu não citei aqui, só gostaria de terminar esse post com o principal conselho que ouvi no evento: “Agarre os desafios, só assim você vai crescer”.

Ansioso para o FrontinBH 2015 =)

Formulário com GeoLocalização

julho 24th, 2014

Obs: este artigo pode ser lido em inglês em: https://medium.com/@sheldonled/form-with-geolocation-7c9cc0936732

Todos os dias preenchemos algum formulário na internet, e sabemos o quão chato é! Por exemplo, porque sempre temos que preencher informações de endereço? Porque o computador não simplesmente “tem” minha localização Deus sabe como? Bom, com HTML5 GeoLocation a experiência do usuário pode ficar bem melhor. Através do HTML5 Geolocation temos as coordenadas geográficas, e através da API de Geocodificação Google conseguimos o restante da informação

Eu assisti a uma palestra sobre melhores práticas em Web Mobile, e aprendi que pode ser uma boa ideia preencher os dados de endereço do formulário usando geolocalização. Você pode aprender mais sobre HTML5 GeoLocation na MDN, e você vai ver que essa API só fornece as coordenadas geográficas. Você pode ver no Can I Use o suporte dos navegadores para GeoLocation, mas por questões de privacidade, no navegador do usuário aparecerá uma pergunta se ele permite fornecer sua localização, ou seja, o preenchimento automático vai depender do usuário.

Uma vez que você tem as coordenadas geográficas do usuário, você pode mandar uma requisição à API Google de Geocodificação, para pegar as informações reais, como cidade, estado e cep. Estas informações podem vir erradas, então é importante deixar o input editável. A URL da API Google que vamos usar é a Geocodificação Reversa, e é mais ou menos assim:

https://maps.googleapis.com/maps/api/geocode/json?latlng=<latitude>,<longitude>

A informações entre tags devem ser substituidas por números reais, tipo assim:

http://maps.googleapis.com/maps/api/geocode/json?latlng=37.4319075,-122.137884

Bom, “talk is cheap show me the code”, Eu fiz um exemplo prático de como você pode usar isso no seu formulário:

Agora, Eu só quero que todo mundo (até eu) comece a usar isso porque é uma boa melhoria e economiza tempo.

OBS: Por questões de segurança, as requisições estão sendo feitas apenas dentro de sites com HTTPS, portanto preste atenção à isso.

Outra coisa, por algum motivo que ainda não descobri porque, em algumas versões do Firefox o código no Codepen não funciona, mas você pode copiar o código e colocá-lo num arquivo para testar que eu imagino que dê tudo certo =)

DOM: id dos elementos são variáveis globais

março 31st, 2014

Vi no twitter e no facebook, algumas pessoas falando que para mostrar um elemento do HTML no Console do Groogle Chrome, você precisa apenas escrever o ID desse elemento. O @johnjbarton esclareceu que isso acontece porque todos os IDs dos elementos SÃO variáveis globais no javascript. Veja mais detalhes abaixo:

O Padrão:

O HTML5 especifica que o objeto window pode ter uma chave de propriedade na qual o valor dela é um elemento html se:

  • Existe exatamento 1 elemento DOM em que a propriedade ‘id’ tem o valor da chave
  • Existe exatamente 1 elemento DOM que a propriedade ‘name’ tem o valor da chave. O elemento deve ser um tipo: a, applet, area, embed, form, frame, frameset, iframe, img, object.

Exemplo, no site da Tribo do CI  você pode abrir o console do chrome e digitar: window[‘branding’] ou simplesmente branding. Aparecerá a tag header com id=’branding’. Se existe mais de uma tag encontrada, regras diferentes são aplicadas. Com isto em mente, veja outro exemplo abaixo:

<div id=”foo”></div>

O elemento acima pode ser acessado via window.foo ou, como todas as propriedades de window, apenas foo. Por exemplo, no console do Chrome, você pode fazer:

> "foo" in window
    true
> foo
    <div id=?"foo">?</div>?

Firefox

No firefox funciona um pouco diferente

> "foo" in window
    false
> typeof foo  // Essa variável existe?
    object
    Element referenced by ID/NAME in the global scope.
    Use W3C standard document.getElementById() instead.

> foo
    [object HTMLDivElement]
    Element referenced by ID/NAME in the global scope.
    Use W3C standard document.getElementById() instead.

> "foo" in window
    true

O que aconteceu? inicialmente não existe a propriedade window.foo. Mas após a primeira chamada, seja diretamente ou pela variável global, a propriedade é criada.

Conclusão

Existe uma padronização do HTML5 na qual os ID’s dos elementos se tornam propriedades de window, por isso que essa facilidade é uma novidade para nós. Cabe agora, aos maníacos de boas práticas, nos dizer qual seria a maneira mais correta de utilizar essa feature.

Esse post é uma versão brasileira de 2ality – DOM: elemtn IDs are global variables.