Pensando em React

Um dos pontos importantes na hora de aprender React é trabalhar no modo que ele espera a “componentização” do conteúdo, esse processo inicia a partir da construção dos mocks.

Passo 1 – Iniciando como um mock

Imagine que você tem a seguinte tela:

mock-portfolio

Como criaríamos componentes com esse mock?

No caso acima temos uma coleção de portfólio, um componente job, com: foto, descrição, url, empresa, Design, e tecnologias. Vamos considerar que toda esta coleção está em um JSON:

E o nosso componente básico é o seguinte:

componente-mock

Seguindo essa estrutura inicialmente nosso componentes com suas hierarquias serão os seguintes:

  • PortifolioList
    • PortifolioItem

Por que falamos em hierarquias? No caso podemos ter componentes que carregam outros componentes, mas isso não impede de outros elementos carregarem o mesmo componente.

Passo 2 – Construindo uma versão estática com React

No post anterior, trabalhamos com “React.createClass” nesse tutorial vamos utilizar um cara chamado “React.Component” ele trabalha de uma forma diferente com ele criamos um classe que estendem de React.Component lembrando que para trabalhar com classes precisamos do babel para rodar o nosso ECMAScript 2015 e o React. Vamos começar pelo item mais básico o PortfolioItem, primeiramente considerando o mock que construímos o seguinte HTML:

Agora vamos passar o nosso HTML para o um componente:

Apenas adicionei o PortfolioItem com HTML estático só para mostrar como funciona o React.Component, notem que trocamos a propriedade class por className isso é necessário para não termos conflitos com a palavra reservada class, mas as informações estão estáticas precisamos carregar as informações dinamicamente, a cada chamada do componente ele precisa ter uma informação diferente, então vamos lá:

No código acima utilizamos o “{}” para especificar que é uma variável dinâmica this.props. acessa os parâmetros que foram passado para o componente, nesse caso chamamos o componente da seguinte forma:

Assim o atributo nome passado no componente acessamos dentro do componente {this.props.nome}, nosso exemplo completo com PortfolioItem e PortfolioList fica da seguinte forma:

No código acima adicionei o JSON como uma constante do nosso componente o ideal que essas dados venha de alguma API. Na sequência leio o JSON e crio um array com componentes PortfolioItem e no render eu apenas passo o array que montamos {jobsList}. Por fim chamamos o ReactDOM.render passando o PortfolioList como o elemento que iremos adicionar o componente.

O nosso HTML fica da seguinte forma:

Podemos organizar melhor o nosso componente PortfolioList, podemos adicionar funções para organizar o seu comportamento, como no código abaixo:

Na atualização do componente adicionamos uma função “_getJobs” responsável para carregar os trabalhos, separamos a lógica de ler os dados da lógica de renderizar os dados. Também usei alguns recursos novos do ECMAScript2015.

Podemos evoluir esse post, mas pretendo ir evoluindo estes exemplos em outros posts, por isso adicionei um repositório no git: https://github.com/fellyph/react-tutorial

Chame o card de SMS ou o card de discagem com um simples link

Você sabia que é possível preparar um envio de uma SMS via tag <a>. Isso é um recurso bem antigo(início de 2010) dos primórdios do HTML Mobile e podemos usar tal recurso no BlackBerry 10. Seu uso é bem simples:

Como podemos ver no código acima na propriedade href do nosso link iniciamos com “sms:” para indicar que vamos enviar um sms e o número na sequência 1234567 é o número o qual você quer enviar a mensagem. Depois utilizamos uma “?” para passar um segundo parâmetro o corpo da mensagem.

Quando clicamos no links é invocado o card pa composição da mensagem, como na imagem abaixo:

IMG_00000670

Outra opção é usar a tag <a> ligar para algum número específico, isso é possível com o seguinte código:

Quando o usuário clicar no link, caso possua o Skype ele será invocado para fazer a ligação.

Caso queira baixo esses exemplos, eles estão no meu gitbub no link: https://github.com/fellyph/Tutorial-bbUI/tree/master/link/www

FEEC Brasil 2012

No dia 01 de dezembro em Recife acontece o FEEC Brasil 2012, um evento especial com grandes nomes relacionados a TI como: Stoyan Stefanov, engenheiro de software do Facebook e o autor de livros Javascript Patterns(faz parte da minha biblioteca) e Object-Oriented JavaScript. Além disso, é o criador do smush.it ferramenta de otimização de imagens. Resumindo o cara é fod* de verdade.

Outro nome forte no evento (que também vem de fora) é Caridy Patino: front end engineer da Yahoo! e especialista em SSJS / NodeJS e plataforma Cocktails Yahoo!. Caridy fará uma palestra sobre os desafios para se construir aplicações HTML5 para dispositivos móveis.

Além dos “pratas da casa” : Fabio Akita (Codeminer 42), Paulo Melo (C.E.S.A.R – SP), Nelson Glauber (C.E.S.A.R | Unibratec), Virgínia Chalegre (C.E.S.A.R Recife), Gustavo Guanabara(Tuiuiú Comunicação – RJ), Pedro Rogério (Ambulance-SP), Felipe Furtado(C.E.S.A.R Recife), Fred Vasconcelos(Joy Street – PE). Os palestrantes que acabei de citar, fazem parte das palestras do salão principal.

Mas as palestras não acabam por ai, entre uma palestra e outra no salão principal, acontecem light talks que eu vou ter o prazer de fazer parte! Vou falar sobre underscores o starter theme criado pela a equipe da Automattic.

Além da minha mini palestra irão participar: Gustavo Costa(EASY – Soluções Integradas), Lucas Cavalcanti(MGR Tecnologia), Nicholas Fazio(NicholasFF.Com), Socorro Macedo(Lefil), Danilo Torres(Mobiclub), Wilker Lúcio(Kajabi – EUA), Bartho Bernsmann(Microsoft Innovation Center – PE), Guilherme Farias(MGR Tecnologia)… Acho que não esqueci de ninguém. A programação completa você confere aqui : http://www.feecbr.com.br/pt/programacao.php?local=Recife

Estou ansioso pelo evento, primeira palestra em Recife cidade onde me formei. Reencontrar os amigos vai ser bem legal e conversar com os participantes do evento sempre é um estimulo para novas idéias. Um evento com 19 palestras um dia de overdose de TI. As inscrições ainda estão abertas então se você está pensando, não pense duas vezes o evento é daqui a uma semana.

Inscrições aqui!

O FEEC Brasil acontece no Hotel Golden Tulip Recife Palace que fica na Av. Boa Viagem número 4070. No dia 01 de Dezembro de 2012, mais informações sobre o evento aqui: http://www.feecbr.com.br/

Programação do 2º Wordtalks DRC

Dia 10 de novembro acontece o segundo Wordtalks é um encontro voltado para debater temas relacionados a desenvolvimento web e WordPress. Por ser um evento com a grade organizada por alunos tem o objetivo de apresentar e debater projetos ou técnicas que os alunos utilizam em seu dia-a-dia.

Cada palestrante tem 20 min para apresentar sua proposta e 10 min para debate. Além das apresentações dos alunos, cada encontro terá a participação de um convidado. O encontro começa as 10h e seu término é as 13h. Duas horas de muita informação e o melhor de tudo isso que você não paga nada.

No segundo encontro o nosso convidado será:

Leonardo Lima

Front-end Developer no portal UOL e responsável pelo projeto de reestruturação do portal UOL mobile. Atua como desenvolvedor web desde 2002, é preocupado com performance, padronização de projetos e reutilização de código. Curioso por novas tecnologias e ferramentas, estudante de Ciência da Computação no Mackenzie.

Leonardo  levará o seguinte tema para o encontro : Pré-processadores de CSS: SASS, LESS e Grid Frameworks.

Além do convidado teremos mais 3 palestras, a programação do encontro ficará da seguinte forma :

10h – Abertura

10:20 – Criando widgets em 20 min.
Palestrante: Fellyph Cintra.
Resumo da apresentação: Apresentação estilo “se vira nos 20”. Em 20 minutos mostrarei os Passos básicos para criar uma widget.

10:50 – Hospedando um site em WordPress
Palestrante: Luis Felipe Veiga Correa
Resumo da apresentação: Pontos importantes para considerar ao contratar um plano de hospedagem para um site em WordPress e as diferenças entre os tipos de servidores.
Site: www.dev2web.com.br

11:30 – SEO para WordPress
Palestrante: Rodrigo Simoni
Resumo da apresentação: O WordPress é um ótimo CMS para trabalhar com SEO. Porém, há uma série de técnicas de SEO On Page, além de alguns plugins que são essenciais e obrigatórios para que seu site possa ganhar visibilidade e conseguir bons posicionamentos nas Serps do Google. Sitemap, Robots, URL amigáveis, canonical tags, conteúdo relevante, long tails e outras técnicas e ferramentas que farão toda a diferença.

Site: www.brandweb.com.br

12:10 – Pré-processadores de CSS: SASS, LESS e Grid Frameworks.
Palestrante: Leonardo Lima
Resumo da apresentação: Cansado de reescrever o mesmo código de css a cada elemento novo de seu layout? De ter que mudar os padrões de tipografia e cores em diversas linhas do seu css? Então conheça e entenda mais sobre Pré-processadores de css, o que são, quais existem, como instalar e o principal: como usar!

Site: http://llaraujo.com/

Para participar do encontro basta fazer o cadastro no link : https://www.fellyph.com.br/blog/eventos/inscricao-para-o-segundo-wordtalks/.

O encontro ocorre no auditório da DRC que fica no seguinte endereço :

Rua Joaquim Floriano, 733 – 10º Andar
São Paulo, 04534-012


Exibir mapa ampliado

Pós Wordcamp São Paulo 2012

8:30 da manhã estava na puc, procurando o pessoal da organização do evento. Pessoas que nunca tinha visto na vida me apresentei aos organizadores “Olá meu nome é Fellyph” olharam pra mim e perguntaram “ah você quer ajudar?”. Perguntei como poderia ajudar, Guilherme olhou pra mim que é esse cara e respondeu você pode ajudar a separar as camisas. Falar a verdade não sei o nome de todo mundo.

Comecei a separar as camisas e batendo o papo com o pessoal falei que meu nome era Fellyph com dois ll, um y e um ph, logo lembraram do meu nome na lista da organização. Longe de ser uma peça que ajudou efetivamente na organização, mas em alguns momentos acompanhava a discussão e dava algumas opiniões sobre alguns casos. Mas foi legal ver o corre do pessoal e ver a dificuldade que é organizar alguns eventos. Ajudei em outros eventos como iSeminar(apenas na divulgação e planejamento), mas nunca tinha visto a dor de cabeça de arrumar um local para o evento correr atrás de patrocinador entre outras coisas que realmente isso é osso.

Depois das 9:00 fiquei no credenciamento, distribuindo camisas e passando algumas informações para os participantes. Entre conhecidos e desconhecidos cumprimentava cada um e via em alguns a ansiedade de cada um em começar o evento. Alguns palestrantes e participantes chegavam com suas malas, vindo de longe Minas Gerais , Goiás, Ceará, Rio de Janeiro e Rio Grande. Esse foram os estados que identifiquei. Uma responsabilidade muito grande em atender as expectativas de quem vinha de tão longe.

As 9:30 começou o evento ainda estava no meio do credenciamento, não tive a oportunidade de acompanhar. Depois que diminuiu o fluxo no credenciamento fui dar uma olhada no coffee e que senhor coffee, fornecido pela UOL(Agradecendo aqui o apoio ao evento). No meio do coffee encontro amigos e ex-alunos(também amigos) sempre bom reencontrar a galera, principalmente ver a evolução dos alunos depois que saíram do curso os caminhos que tomaram.

Coffee fornecido pela UOL

Mas qual é o porque desse pequeno relato, falei um pouco da minha mini contribuição do evento. Por que é sempre bom contribuir e apoiar eventos com esse objetivo, sem objetivo financeiro apenas apoiar e fortalecer a comunidade WordPress. Se você tem uma ideia de criar um wordcamp em sua região corra atrás porque vale super a pena desenvolver eventos desse porte.

Por volta das 11:20 começou a palestra Matías Ventura, tive a oportunidade de acompanhar rapidamente. Depois teve uma pausa para o almoço foi a hora de trocar os cartões(vergonha eu não tenho cartão de visita).

Resultado do almoço

No inicio da segunda parte do evento rolou o light talks pra mim foi um dos melhores momentos, palestras rápidas com boas informações. Duas dicas muito boas foram os plugins desenvolvidos pela galera um é o get post image : http://vinicius.soylocoporti.org.br/get-post-image-wordpress-plugin/ desenvolvido pelo Vinicius, a funcionalidade básica dele é a seguinte ele associa tamanho de imagens a tipo de posts, ajudando bastante a diminuir a quantidade de imagens, quando você criar tamanhos personalizados. Outro plugin interessante é o Mapa de vista plugin desenvolvido pela equipe do hacklab http://mapasdevista.hacklab.com.br/ a funcionalidade básica desse plugin é associar um post a uma geolocalização em um map. Esses dois plugins podem gerar conteúdo para um post

Depois do lightalks fui acompanhar a palestra do Felipe Coelho falou um pouco sobre o processo de desenvolvimento de temas para WordPress, teve dois pontos que para mim foi interessante. Por sempre desenvolver temas comerciais para empresa nunca fui atento a dois pontos. A questão da localização ou internacionalização do seu tema, ou seja, deixa o tema com suporte para outros idiomas exemplo o tweenty eleven usa esse recurso e o outro ponto fazer a validação do tema. Os links a seguir foram mencionados pelo Felipe sobre validação e teste de temas:

http://codex.wordpress.org/Theme_Unit_Test
http://wordpress.org/extend/plugins/theme-check/

Ás 15:15 acompanhei a palestra do Diogenes sobre alta performance com wordpress, não sou um cara especialista em infra mas curti bastante a palestra. Por fim rolou a palestra sobre Malware e Segurança em WordPress com Bruno Borges, passou várias dicas de segurança tipos de ataques, chamou a atenção para uma questão no caso hoje em dia até o nosso Smartphone está vulnerável a ataques. Um dos links que ele compartilhou foi teste de segurança para sites wordpress : http://sitecheck.sucuri.net

Antes de publicar o post saiu o link palestra do Bruno Borges : http://blog.sucuri.net/2012/08/wordpress-security-presentation-in-portuguese.html

Infelizmente devido a correria acompanhei muito pouco as palestras mas posso falar do pouco que vi curti bastante. Fiz poucos comentários sobre as palestras confesso que estou aguardando os vídeos para acompanhar com mais calma.

Aviso quem participou do evento em breve será enviado um e-mail com o link para gerar o certificado de participação.

Finalizo aqui meu depoimento e gostaria de parabenizar os organizadores pelo evento estão de parabéns.

Oportunidade – Webdesign

01 vaga para Webdesign em aberta para contratação imediata, os interessados devem ter experiência na área e atender os seguintes requisitos:

  • Webdesign (layouts web) (Avançado)
  • HTML e CSS (Avançado)
  • Webstandards (Avançado)
  • Usabilidade
  • Javascript (Básico)
  • Shockwave (Flash)

É desejável conhecimento em modelagem 3D para web.

A contratação é em regime CLT 44hs semanais.  Salário a combinar.

Interessados enviarem curriculos para galvao@esbj.com.br