Front in BH 2014: Eu Fui!!!

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 =)

Dica Rápida: Desafio CSS (iMasters) – Especial Cone

 

cone

Há alguns dias atrás foi lançado no iMasters um desafio de css, criar um cone usando somente uma div, no html. No artigo do desafio, o Bernard de Luna estabeleceu algumas regras, dentre elas, que o único código HTML dentro do body seria este

 <div class="cone"></div>

GITHUB

Com intuito de inaugurar/divulgar o Github da Tribo do CI nós disponibilizamos a nossa implementação do Cone CSS no GitHub, feito por mim: Sheldon Led. Vamos explicar um pouco do código.

Algumas explicações sobre o código.

Se você observar a figura acima, com um olhar mais analítico, perceberá que o cone nada mais é do que um triângulo com a base arredondada em cima de um losango com uma borda arredondada e mais escura. O código CSS está bem dividido nessas 2 partes, o “triangulo” é o .cone:after e o “losango” é o

  • Pseudo-classes: Existe um artigo bem completo no Tableless sobre Pseudo-classes. Uma pseudo-classe, ou pseudo-elemento, nada mais é do que alguns comportamentos/padrões de elementos HTML em CSS. Para o cone, utilizamos a pseudo-classe :after, que em uma interpretação a grosso modo, interpreta um elemento depois do elemento em questão, que no caso é a div da classe cone.
  • Bordas: Tanto no .cone quanto no .cone:after controlamos cada borda separadamente. Existe uma explicação legal sobre bordas em CSS no site do Maujor.
  • Transform: Novamente, existe um artigo bem detalhado e com exemplos de CSS Transform no site do Tableless. No nosso cone utilizamos o transform para rotacionar o elemento. É possível utilizar vários efeitos inclusive simultaneamente com o transform, porém como ainda não é uma especificação definida, é preciso utilizar prefixos.
  • Prefixos: Os prefixos são propriedades de CSS que funcionam especificamente para um navegador, pelo fato de ainda não ser uma especificação W3C ou por ser uma especificação em teste. No cone utilizamos os prefixos: -webkit (Chrome, Safari e Opera mais recente),  -moz (Firefox, Iceweasel), -ms (Internet Explorer), -o (Opera). Utilizamos os prefixos no css transform e border-radius.
  • Box Shadow: O box-shadow é uma propriedade do CSS3 que desenha uma sombra atrás de um elemento. Ele foi utilizado para desenhar a borda mais escura da base do cone.

Você pode ver o código, no  Github da Tribo do CI e tentar fazer sua própria implementação de exemplo, e ver abaixo (caso seu navegador estiver atualizado) nosso exemplo sendo executado.

 

 

 

 

 

 

 

 

OBS: Usei como base de conhecimento para produzir o cone, esses Exemplos de figuras geométricas em CSS.