Utilizando OG Image Generation do Next.js para criar imagens dinâmicas

E 2022 vai chegando ao fim... que ano intenso! Um ano de grandes conquistas pessoais e profissionais e que passei se adaptando as circunstâncias do jeito que dava, tanto que agora no fim do ano tive que de fato fazer uma recapitulação para escrever esse post.

A principal realização esse ano foi começar a morar sozinho na minha "casa" nova. Foi a realização de um sonho que já batalhava há alguns anos, e mesmo já morando sozinho há alguns meses, às vezes me pergunto se isso realmente está acontecendo. Está sendo uma experiência maravilhosa, e você pode acompanhar por aqui: [@apedojowzito](https://www.instagram.com/apedojowzito/)

## Estruturação de uma área de UX/UI na empresa

No profissional, a migração consolidada para UI vem cada vez mais trazendo desafios que fazem parte da jornada. Junto à isso, estou participando da estruturação de uma área de UX/UI na empresa que faço parte, buscando trazer uma cultura de *Design Thinking* para uma empresa que ainda está absorvendo esse modo de pensar seus produtos. Já tivemos grandes vitórias nesse sentido e a adoção dessa cultura está sendo bastante satisfatória, mesmo com algumas especificidades comuns em empresas não tão maduras nesse aspecto. 

O que me deixa bem tranquilo nesse desafio, é trabalhar com pessoas **FODAS** como o [Renan Bonin](https://renanbonin.com/) e a [Mariana Bassani](https://br.linkedin.com/in/mariana-bassani-74b701158), que fazem parte dessa nova área dentro da empresa, e do [Felipe Alecrim](https://br.linkedin.com/in/felipe-alecrim-921a657b) e [Eduardo Junque](https://br.linkedin.com/in/eduardo-junque-8908211b) que sempre estão disponíveis para compartilhar experiências já vividas por eles nesse processo de criação de uma cultura nova na empresa.

Ainda sobre este assunto, estou trabalhando de forma bastante ativa com UX Research. Mesmo que isso não faça parte do escopo de um UI Designer, estou adorando essa jornada... Pesquisas e mais pesquisas, levantamento de hipóteses e validação através de dados estão me dando um contexto sobre User Experience que será bastante útil em próximos desafios.

Por fim, neste ano escrevi o dobro de posts do ano passado (não que fosse difícil), mas já termino o ano com um sentimento positivo sobre isso, trazendo uma meta de aumentar a frequência no próximo ano.

## Livros, músicas e afins

O pior ano literário da minha vida com apenas um livro finalizado 😬. Esse ano consumi muito mais conteúdo através de vídeos e podcasts, a meta no ano que vem é melhorar isso.

De música também foi um ano atípico, escutei muito menos do que os anos anteriores, mas, voltei a ir em shows da melhor forma possível: [Arctic Monkeys](https://open.spotify.com/artist/7Ln80lUS6He07XvHI8qqHH) e [Interpol](https://open.spotify.com/artist/3WaJSfKnzc65VDgmj2zU8B) na mesma noite, no Rio de Janeiro.

## E 2023?

Terminei 2022 com o início da conclusão de uma grande meta: **Fazer uma Pós-graduação**. Há algum tempo procurava algo focado em Design, mas que não fosse focado apenas em interface, e que fosse amplo o suficiente para eu absorver conhecimento de outras áreas do Design para aplicar nas minhas interfaces. E após bastante procura, acho que encontrei o ideal: [Design Emocional na Belas Artes](https://novo.belasartes.br/design-emocional-ba-online-ead/). Estou muuuuuuito motivado para começar e espero trazer bastante informação positiva no resumo do ano que vem 😎

### Workshop de Front-end

Assistindo algumas aulas de UI, tive um insight de como posso enriquecer uma cultura de Front-end dentro da empresa que trabalho, através de um workshop bem prático, onde pretendo trazer desde alguns macetes na diagramação de uma interface, até experiências vividas nessa carreira que julgo ser bastante interessante pro mercado que estamos.

### Escrever mais conteúdo

Espero no próximo ano juntar algumas metas, como: escrever mais posts aqui no blog, contando experiências vividas nesse processo de criação de uma cultura de *Design Thinking* dentro da empresa que estou, aprendizados da Pós-graduação, e também, enriquecer meu portfólio com projetos desenvolvidos durante um ano. Sinto que participei de vários projetos interessantes, mas não acabo documentando o processo e o resultado em nenhum lugar 😶

Para além disso, se for possível combinar algumas viagens nesse meio tempo ficarei bastante satisfeito... 😏

No mais, feliz 2023!

</2022>

Em 2022 completei 10 anos desenvolvendo para a Web. E embora eu esteja em uma transição de carreira (Front-end para UI), decidi escrever sobre os pontos mais importantes na minha evolução como Desenvolvedor. Irei escrever esse post na forma de dicas, que na minha opinião, podem ajudar outras pessoas a evoluir nessa profissão tão dinâmica e desafiadora.

## Aprenda a base antes do framework

Nesses 10 anos eu já perdi a conta de quantos frameworks foram criados. Uma coisa que aprendi com o tempo para não se desesperar sempre que um framework novo entra na moda, foi que **aprender a base de tudo** (HTML/CSS/JS, no meu caso) faria com que qualquer aprendizado novo fosse mais fácil. E quando digo base, é aprender todas as minúcias de uma linguagem, para depois focar apenas na sintaxe e nas *design patterns* da nova tecnologia.

## Exerça uma função social em seu ambiente de trabalho

Muito além de querer evoluir de Júnior para Pleno, e de Pleno para Sênior, ter um cuidado com o bem-estar de seus amigos de profissão faz o trabalho de todo mundo na equipe evoluir. Acredito até que essa seja uma das principais qualidades de um profissional, e digo em **qualquer área**. Muito além da empatia ao compartilhar conhecimento com outras pessoas, sempre que tiver abertura, ajude as pessoas, pergunte se está tudo bem e construa relações sólidas sem esperar nada em troca. De bônus, você constrói um bom... (aquela palavra favorita dos coachs) Networking.

## Tenha outras pessoas como referência

Ter grandes profissionais da área como referência pode ser um norte muito interessante para saber como evoluir em sua profissão. Muitas vezes essas pessoas se destacam por alguma skill específica, seja pela criatividade, comunicação ou contribuição para a comunidade. Tentar combinar essas skills pode fazer você se destacar também. Só fique atento para não endeusar pessoas, e principalmente, saber que elas também erram.

## Você não precisa saber tudo

Muitas vezes a gente imagina que para ser um programador bem-sucedido, a gente precisa saber tudo sobre a área de programação. E pior, criamos uma expectativa falsa de que as maiores referências da área também sabem tudo, e com isso, nos desesperamos e acabamos perdendo o foco do que realmente precisamos aprender. [Esse post sobre o assunto](https://overreacted.io/pt-br/things-i-dont-know-as-of-2018/) de um dos fundadores do React fez bastante sucesso na época, recomendo fortemente a leitura.

## Aprenda novas tecnologias com trabalhos pessoais

Eu sei o quão difícil é conciliar o aprendizado de novas tecnologias com nossa rotina acelerada de entregas no mundo corporativo. Uma das coisas que mais fez eu aprender novas tecnologias, foi desenvolver projetos pessoais nas horas livres. Nessas horas tudo é mais leve, não tem prazos e você faz por diversão. Um bom exemplo pessoal foi o [Peakseekers](https://jofelipe.com/post/criando-uma-rede-social-do-zero).

## Saúde mental acima de tudo

Síndrome do Impostor, Burnout, Depressão e outras condições psicológicas são cada vez mais perceptíveis em nossa área. Chega um momento em nossa carreira de que a melhor escolha que podemos fazer antes de querer aprender algo novo, é procurar ajuda PROFISSIONAL. Quando nossa saúde mental está saudável, todo o resto vem naturalmente.


## Atenção aos detalhes

Uma das coisas que aprendi que faz a diferença na percepção das pessoas sobre o quão profissional você é, fazendo você ser destacado dentre os outros, é **atenção aos detalhes**. E nesse mundo de programação, isso vai desde a adoção de uma nova *design pattern* de código, até a preocupação com a experiência do usuário nas coisas mais triviais, como seguir um padrão de cores em um projeto, ou até os efeitos de interação do mouse em um botão. Acredite, isso faz bastante diferença.


## Tenha empatia com outras áreas

Em meu caso, como Desenvolvedor Front-end, uma coisa que fez a diferença em minha carreira sempre foi a boa relação com Designers e Back-ends. Entender os principais desafios, anseios e frustrações dessas áreas ajudam não só na entrega da minha tarefa, mas também na qualidade geral dos nossos serviços como um todo.

E é isso. Tem outras coisas que aconteceram em minha carreira que julgo relevante, mas considero que os pontos acima foram os mais importantes na minha evolução. Lembre-se que cada pessoa é uma pessoa, então não leve isso como uma regra 😉

Caso queira trocar uma ideia comigo sobre esse post ou outro assunto, é só me chamar no [Linkedin](https://linkedin.com/in/jofelipe) :)


O que aprendi em 10 anos desenvolvendo para a Web

No mês passado (Julho/22) participei pela primeira vez de um Design Sprint. Na verdade, foi a primeira vez que houve esse processo na empresa em que eu trabalho (Fitcard). E se já não fosse desafiador o suficiente, adaptamos algumas metodologias para nossa realidade e aplicamos **parte** do processo em apenas dois dias (sem contar a etapa de prototipação).

Resolvi fazer esse artigo para pontuar de forma prática o que achei interessante, mas também para relatar minha participação como UI Designer. Caso queira saber mais sobre a metodologia e os processos, recomendo o [livro oficial](https://www.amazon.com.br/Sprint-M%C3%A9todo-Google-Testar-Aplicar/dp/8551001523/ref=sr_1_3?keywords=design+sprint&qid=1660678300&sr=8-3).

## O problema

Tínhamos um card aberto em nosso *Product Backlog* há algum tempo, sobre uma funcionalidade de busca de estabelecimentos pelo nosso aplicativo de Vale Benefícios, e achamos o "problema" ideal para ser resolvido através de um Design Sprint, já que é uma funcionalidade de um produto que temos bastante autonomia para desenvolver novas funcionalidades.

![Descrição do card](https://media.graphassets.com/n5Dyjg0S2iSke4KrL3ju)

## Interface original

![Interface original](https://media.graphassets.com/myt6gRiTwipK0q8zA5LQ)

## Mapear
Primeiro, definimos perguntas do tipo *"Como podemos?"* através de entrevistas com usuários e stakeholders, para juntarmos o maior número de possibilidades e ideias de como poderíamos melhorar aquela funcionalidade. Através uma votação, definimos as perguntas mais importantes: 

![Como podemos?](https://media.graphassets.com/R1qYNoTVQTes4BtqO0QU)

Depois, pedimos para que cada participante criasse um fluxo de etapas para o usuário buscar algum estabelecimento, ler as informações, e decidir se é um estabelecimento viável para ele se deslocar até lá. Tudo em nove passos, desde o **Início** de interação do usuário com nossa aplicação, até o **Objetivo final** (escolher um estabelecimento). Depois, também através de votação, desenhamos um fluxo ideal, escolhendo as melhores etapas de cada fluxo criado anteriormente. 

Com isso, pegamos as perguntas que fizemos anteriormente, e vimos em qual etapa cada uma se encaixava. Após isso, ficou muito mais claro onde *estava* o problema, e onde deveríamos focar para encontrar uma solução. Ficou evidente que o maior problema estava na etapa de **Busca** e **Decisão**.

![Fluxo desenhado](https://media.graphassets.com/KOWhFfST5mmEX6aXbk7m)

Para finalizar a etapa de mapeamento, decidimos em conjunto com todo mundo dando sugestões, quais seriam os objetivos a longo prazo dessa funcionalidade, e novamente através de votação, decidimos a principal:

> Aumentar o número de usuários (clientes que usam os cartões) e de credenciados. Pois a nova funcionalidade facilitará o uso para o usuário, e aumentará o lucro para o credenciado.

Esse objetivo foi essencial para guiar as decisões dali pra frente, relacionadas ao desenho da funcionalidade, desde rabiscos no papel até a prototipação.

## Desenhar
Aqui foi uma das minhas partes favoritas de todo o processo, a hora de começarmos a pensarmos de forma efetiva como seria a funcionalidade. Começamos através dos [Crazy Eights](https://www.alura.com.br/artigos/crazy-eights-uma-tecnica-rapida-e-visual-para-explorar-ideias-com-seu-time), que foram fundamentais para sairmos da zona de conforto da ideia inicial de cada participante. 

Depois, cada participante ficou com a tarefa de desenhar em um papel o fluxo ideal do usuário, levando em conta todas as ideias que trabalhamos até agora, e claro, o objetivo final. Abaixo, a minha sugestão:

![Rabisco frame](https://media.graphassets.com/9rpoD4FbQayLzH9EtQ2F)

Adivinha o que vem agora? Sim, votação! Decidimos qual **conceito geral** estava mais de acordo com nosso objetivo final, mas além disso, quais itens de outros conceitos também poderíamos aproveitar na nossa ideia final. Legal destacar que essa votação foi anônima :)

Com todas essas ideias consolidadas, chegou a hora do **Storyboard**! Todas nossas ideias reunidas em um wireframe, última etapa antes da prototipação. Vale citar que alguns elementos de interface e funcionalidades foram desenvolvidas especificamente para se adequar a regra de negócio do nosso aplicativo.

Aqui o resultado final:

![Wireframe](https://media.graphassets.com/DvKMEMiRTLqP7fSOQ6Qr)

## Prototipar
Aqui foi a minha hora de colocar a mão na massa! Fiquei bastante feliz de ter meu o conceito geral escolhido como o vencedor da votação, mas principalmente, fiquei ainda mais feliz de ver como todas as opções traziam conceitos interessantes, e como conseguimos juntar tudo em uma ideia só. Com um wireframe bem completo, ficou mais tranquilo desenhar a interface do usuário. 

Com o layout terminado, começamos a prototipar. Definimos quais funcionalidades eram mais importantes para os testes com o usuário (não é necessário prototipar TUDO), e chegamos ao protótipo final:

![Protótipo final](https://media.graphassets.com/2XUv5YeATBSHURvRZQsM)

## Conclusão
Após o término do protótipo, começamos os testes. E claro, surgiram alguns pontos de melhoria que são perceptíveis apenas após os testes com usuários reais. Após isso, é hora do time se reunir novamente, unir pontos de melhoria em comum, e finalmente, lançar a funcionalidade para o usuário.

Para mim, um dos principais benefícios dessa metodologia foi promover uma cultura de inovação dentro do nosso time, diminuir consideravelmente refações e entregar rapidamente uma solução para o usuário.

Mesmo deixando de realizar algumas etapas *by-the-book*, ficou evidente o quão necessário é aplicar essa metodologia não só para novos produtos, mas também para rever pontos de melhoria em produtos que já estão no mercado.

### Agradecimentos
A ideia de aplicar Design Sprint surgiu de uma solução de uma [Rocha, em uma Retrospectiva](https://agilemomentum.wordpress.com/2016/04/23/speed-boat-avaliando-o-passado-com-o-olhar-no-futuro/), e a realização não seria possível sem a ajuda do [Lucas Oliveira](https://www.linkedin.com/in/lucasoliveira19/) e também do [Renan Bonin](https://renanbonin.com/) (nosso Product Owner e UX Designer, respectivamente). A condução do evento por parte deles, de acordo com nossa realidade, e **com o foco e participação de toda a equipe**, foi fundamental para o sucesso da mesma, mesmo com o enorme desafio de fazer tanta coisa em tão pouco tempo :)

Meu primeiro Design Sprint

Não precisava de muito para 2021 ser melhor que 2020, mas este ano foi um ano de muito aprendizado em minha vida pessoal, o que acabou fazendo grande diferença na minha vida profissional.

## Pessoal
Depois de muito tempo pensando sobre o assunto, finalmente decidi ir atrás de sessões de terapia. Todo mundo que trabalha com tecnologia sabe o quanto essa área nos consome psicologicamente, e depois de 10 anos trabalhando na área, decidi que era a hora de focar na saúde mental. 

O começo foi um pouco complicado (como imaginei que seria), mas após alguns meses posso dizer que foi **a melhor decisão que fiz em 2021**. Amigos, viagens e arte são ótimos para acabar com momentos de stress, mas em alguns momentos apenas ajuda especializada pode nos ajudar.

### Livros
A meta para 2021 era ler pelo menos 15 livros. Infelizmente consegui ler apenas 8. Os favoritos foram: <a href="https://www.goodreads.com/book/show/9902586-maus" target="_blank">MAUS</a> (Art Spiegelman) e <a href="https://www.goodreads.com/book/show/57967571-odisseia-austral" target="_blank">Odisseia Austral</a> (Pedro Hauck).

### Música
Este ano deixei o rock um pouco de lado e comecei escutar outros gêneros. Cada vez mais escuto artistas do hip-hop como <a href="https://open.spotify.com/artist/4V8LLVI7PbaPR0K2TGSxFF" target="_blank">Tyler, the Creator</a>, <a href="https://open.spotify.com/artist/6l3HvQ5sa6mXTsMTB19rO5" target="_blank">J. Cole</a> e <a href="https://open.spotify.com/artist/2YZyLoL8N0Wb9xBt1NhZWg" target="_blank">Kendrick Lamar</a>. 

Mas o que me empolgou mesmo é a nova onda de bandas russas post-punk. Virei fã de <a href="https://open.spotify.com/artist/1nVq0hKIVReeaiB3xJgKf0" target="_blank">Molchat Doma</a>, mas também destaco <a href="https://open.spotify.com/artist/7yjnZ3eibFQRN65u1syJZg" target="_blank">Ploho</a> e <a href="https://open.spotify.com/artist/3wIDY01itbfdsQpMsyRZVG" target="_blank">Human Tetris</a>.

## Profissional
Continuo cada vez mais trabalhando com UI Design, e o que senti de diferença de 2021 para 2020 é que estou ficando cada vez mais confiante no meu trabalho. 

No meio do ano convenci o <a href="https://renanbonin.com/" target="_blank">Renan Bonin</a> a inaugurar a área de User Experience na Fitcard e a experiência tem sido incrível. Renan é um profissional foda, e isso faz com que eu evolua a cada trabalho realizado junto com ele. 

A meta (ousada) para 2022 é dar início a um Design System que englobará todos os sistemas da Fitcard. 

### Front-end
NextJS ainda é minha stack favorita para desenvolvimento, e neste ano fiz alguns projetos pessoais em que aprendi bastante, trabalhando também com GraphCMS (CMS headless) e GraphQL. Confesso que a simplicidade do GraphQL se tornou minha opção favorita para aplicações mais simples, mas para aplicações mais robustas (principalmente na Fitcard), ainda sinto mais confiança nas API's feitas com .NET Core.

#### myFlights
Meu projeto pessoal favorito do ano é o <a href="https://myflights.jofelipe.com/" target="_blank">myFlights</a>, que foi feito com NextJS e GraphQL. O projeto é basicamente uma cópia do <a href="https://my.flightradar24.com/jofelipe" target="_blank">myFlightRadar</a>, mas com meus dados pessoais e feito para ser exibido em um display de 10" que tenho em minha casa, como se fosse um slideshow. O código-fonte está no <a href="https://github.com/jofelipe/myFlights" target="_blank">GitHub</a>.

#### Melhorias no portfolio
Aproveitando novos conhecimentos, também fiz algumas mudanças aqui no site. Migrei todo meu conteúdo para o GraphCMS, integrando GraphQL com o <a href="https://nextjs.org/docs/basic-features/data-fetching" target="_blank">Data Fetching</a> do NextJS. Essa combinação é imbatível.

### O que espero em 2022?
Em 2020 escrevi que o mais esperava para 2021 era vacina. E ~~mesmo com incompetência do governo~~ essa "meta" foi cumprida. Ainda há muito o que fazer mas me sinto otimista com o próximo ano.
As metas pessoais são:
- Terminar a mudança para morar sozinho;
- Consultar uma nutricionista e fazer ainda mais exercícios físicos;
- Fazer uma viagem para o exterior (saudades).

E as profissionais:
- Fazer algum curso especializado em UI Design;
- Ser especialista em testes unitários no Front-end;
- Evoluir em todas as áreas relacionadas a gestão de pessoas.

Por fim, espero um 2022 mais leve, e que no fim do ano eu volte para dizer que todas (ou quase todas) metas foram cumpridas 😀


</2021>

Ah, 2020. Difícil fazer um resumo em ano tão complicado como esse, mas vou tentar resumir o que aconteceu de relevante nesse ano.

## Fitcard

Pra começar, depois de oito anos trabalhando em agências de publicidade, mudei de emprego. Aceitei o desafio de ser Front-end Sênior na [Fitcard](https://www.fitcard.com.br/), uma empresa que me deu uma nova visão sobre produtos digitais, pra dizer o mínimo. Embora eu não ligue para títulos como "Júnior", "Pleno" ou "Sênior", é inegável a responsabilidade que isso traz. Tive inúmeros momentos de insegurança mas ainda não consigo relacionar a isso a Síndrome do Impostor, já que na minha opinião o segundo problema é mais grave.

Voltando à Fitcard, trabalhar com produtos que impactam milhões de pessoas no Brasil era algo que eu buscava há muito tempo, quando me sentia frustrado por trabalhar em projetos que duravam no máximo dois meses e às vezes já nasciam obsoletos.

## Novos aprendizados

Uma das minhas metas para 2020 era me especializar em React e todo seu ecossistema. Por isso no meio do ano fiz o [bootcamp da Rocketseat](https://pages.rocketseat.com.br/gostack), algo que me motivou a criar o [Peakseekers](https://peakseekers.app/), como explico [neste post](https://jofelipe.com/post/criando-uma-rede-social-do-zero). Além disso, uma das metas que coloquei para mim no trabalho foi de ter um projeto em produção feito com React (algo que ainda não tinha acontecido na Fitcard), e isso aconteceu agora, em Dezembro 🎉

Além do React, este ano foquei em aprender Next.js, e essa foi a melhor escolha que fiz para minha carreira em 2020. Fico feliz em saber que no mesmo ano que comecei a aprender, já tenho duas aplicações em produção com um dos frameworks mais _hypados_ do momento.

## UI Designer?

Embora eu adore trabalhar com Front-end, eu na verdade queria ser "Web Designer", como era falado em 2012. Mas por uma oportunidade no meu primeiro emprego, acabei tendo que trabalhar mais com código e por consequência fui cada vez mais querendo me especializar nisso. Porém, nunca parei de acompanhar a área de Design (ou Criação como é falado em agências), e com a sorte de sempre trabalhar com ótimos designers, acabava sendo inspirado para criar coisas pequenas no Front-end.

Porém, na Fitcard acabei tendo mais liberdade para trabalhar com UI. Começou com coisas pequenas mas acabou evoluindo de forma muito rápida, e hoje já participo de projetos desde o começo, prototipando e desenhando interfaces. E aqui vai a primeira meta para 2021: Evoluir em UI. Embora eu consiga seguir tendências, ainda preciso de uma base teórica sobre o assunto, inclusive já me inscrevi em cursos sobre a área 🤗

## Livros e músicas

Trabalhar nove meses em casa me forçou a criar (e seguir) uma nova rotina. Por incrível que pareça, foi o meu melhor ano literário. Da meta de 20 livros que prometi [aqui](https://medium.com/@jofelipe.com/2019-meu-ano-em-livros-8270ee742577), ainda sem saber o que viria pela frente, consegui ler 18. De Montanhismo à Biologia, aqui vai meu resumo de 2020:

![Meus livros em 2020](https://media.graphcms.com/Ca1OKE6SWytWgf3sjmGv)

Quanto às músicas, segundo o Spotify a banda que mais escutei em 2020 foi Ghost. Mas vale citar o que conheci (ou comecei escutar mais) esse ano e não sai mais das minhas playlists:

- [Run The Jewels](https://open.spotify.com/artist/4RnBFZRiMLRyZy0AzzTg2C): um duo de hip hop que fez um dos melhores discos de 2020: [RTJ4](https://open.spotify.com/album/6cx4GVNs03Pu4ZczRnWiLd). Vale citar que neste álbum há várias participações especiais, como Zack De La Rocha (Rage Against the Machine) e Josh Homme (Queens of the Stone Age).
- [Rammstein](https://open.spotify.com/artist/6wWVKhxIU2cEi0K81v7HvP): Pois é, banda super famosa mas que só esse ano parei pra escutar sua discografia. O álbum mais recente ([RAMMSTEIN](https://open.spotify.com/album/1LoyJQVHPLHE3fCCS8Juek)) é o meu favorito.
- [New Order](https://open.spotify.com/artist/0yNLKJebCb8Aueb54LYya3): Como você pode ver no rodapé desse blog, New Order foi uma das bandas que mais escutei em 2020. E confesso que não gostava muito de New Order pelo simples fato de só ter sido criado após o fim do Joy Division. Porém, não tem como negar o talento do Bernard Sumner (que vocal maravilhoso), Peter Hook e Stephen Morris.

## O que espero em 2021?

### Vacina!!!

E como falei acima, quero me especializar em UI, mas sem deixar o Front-end de lado. Para isso, quero continuar evoluindo junto com as novas atualizações do Next.js, e quem sabe, finalmente fazer um aplicativo nativo usando React Native.

2020 ensinou que nem tudo está ao nosso alcance. Na verdade, temos muita pouca coisa sobre nosso controle. Por isso, não coloco muita expectativa sobre o próximo ano, assim como deveria ter feito antes.

Esse foi o meu primeiro post nesse formato, e nem tenho intenção de compartilhar ele. Na verdade, será um exercício que farei todo fim de ano para extrair as coisas positivas que aconteceram e (tentar) fazer planos para o futuro.

A inspiração veio do [Willian Justen](https://willianjusten.com.br/meu-ano-de-2020/), e se eu conseguir inspirar mais alguém a fazer isso, já está valendo.

No mais, feliz 2021!


</2020>

Após finalizar o bootcamp da [Rocketseat](https://rocketseat.com.br/) em junho de 2020, coloquei na cabeça que precisava criar alguma aplicação para o mundo real, tendo como principal objetivo colocar em prática tudo o que havia aprendido. A ideia inicial era fazer uma plataforma para catalogar livros, basicamente o que é feito hoje no [Goodreads](https://www.goodreads.com/) mas com uma interface e UX mais amigável para os usuários.

Porém, existem N plataformas para catalogar leituras e eu não estava completamente satisfeito com a ideia. Foi aí que em uns estalos de inspiração eu pensei em unir duas paixões: **montanhismo** e **tecnologia**.

A ideia inicial veio em julho, e como neste período também estava fazendo um curso de UX, pensei em usar essa ideia como um projeto real, e com isso, aprendi a pensar em um produto não apenas como um desenvolvedor, mas também como empreendedor (embora eu não tenha nenhuma ideia de lucrar com isso). Meu primeiro pensamento foi: **"Legal, tenho uma boa ideia. Mas como vou evoluir essa boa ideia para que ela já não nasça morta?"**.

## Pensando no produto

Embora seja um projeto pessoal feito nas horas vagas, resolvi tratá-lo como um projeto real. E com isso, deixei um prazo de um mês para focar no UX. Desde protótipos, regras de negócio, diagramas de user journey até proto-personas. E aqui vai uma dica clichê mas que é difícil de colocar em prática: FOQUE NO MVP! Isto é, foque em lançar o mínimo para seu cliente, as melhorias e novas funcionalidades vem depois.

O problema que eu precisava resolver era: Um aplicativo para que montanhistas consigam exibir quais montanhas ele já conquistou (em forma de história, com um breve resumo e algumas fotos), e as montanhas que ele quer conquistar, _uma espécie de Instagram para montanhistas_.

### Mas… O que faz o Peakseekers ser uma rede social diferente?

Influenciado nos últimos anos por pessoas como [Jaron Lanier](https://www.ted.com/talks/jaron_lanier_how_we_need_to_remake_the_internet?language=pt-br), mas também pela própria profissão, comecei a me preocupar de fato com Privacidade, e como hoje somos meros marionetes de grandes empresas como Google e Facebook. Sim, o famoso papo do “o Google escutou o que eu falei”, de como somos bombardeados por propagandas direcionadas e manipulações comportamentais. Por isso, um dos meus principais objetivos com o Peakseekers era ir na contramão do que existe hoje.

Embora hoje em dia seja quase impossível fugir disso (até porque sempre usamos ferramentas de terceiros), o Peakseekers não tem nenhum sistema de rastreamento do usuário (exceto Google Analytics) e não exibe nenhum tipo de propaganda.

Também não há a opção de seguir usuários, e apenas o escritor sabe quem curtiu sua história.

Isso envolve alguns fatores: não tenho retenção de usuário (já que não uso algoritmos de engajamento) e acabo tendo prejuízo financeiro (há custos relacionados ao Google e Algolia). Sim, talvez eu não seja um bom empreendedor, por outro lado, fico em paz comigo mesmo sobre minha missão como desenvolvedor de uma rede social.

## Tá legal. Mas como catalogar todas montanhas pelo mundo?

Até por questões de performance, queria ter o maior número possível de montanhas catalogadas no banco de dados da própria aplicação (mantida no Firebase). Mas eu tinha alguns problemas: onde achar um catálogo de montanhas pelo mundo, e pior, padronizar os dados para manter uma consistência na aplicação?

A resposta para a primeira pergunta é o magnífico [Peakbagger](https://www.peakbagger.com/), um site com um catálogo de milhares de montanhas pelo mundo mantido com a ajuda de montanhistas e a paixão de seu desenvolvedor, Greg, que aceitou compartilhar os dados do site com o Peakseekers, tendo em conta que é um projeto não comercial, focado em estudos de tecnologia.

Com a aprovação do desenvolvedor, usei scripts em Python ([Scrapy](https://scrapy.org/)) para extração de dados. Depois de alguns testes, criei um script dinâmico para conseguir extrair cerca de 30000 montanhas cadastradas no site.

Porém, tinha um detalhe: embora meu público-alvo sejam pessoas do Estados Unidos (maior público de montanhistas do mundo), eu queria ter um catálogo decente de montanhas brasileiras. E isso foi possível graças à API aberta do [OpenStreetMap](https://www.openstreetmap.org/).

Depois de um período relativamente trabalhoso de padronização de dados, tinha em mãos mais de 22000 montanhas prontas para serem enviadas ao Firebase, e aqui vale uma observação: a performance de inserção em lote do Firebase é ABSURDA. Em pouco mais de 20 minutos, todas as montanhas já estavam cadastradas no banco de dados.

## A hora de desenhar as interfaces

Eu tenho um certo “problema” que preciso sempre desenhar interfaces (e até mesmo algoritmos) no papel. Fico sempre com muitas ideias na cabeça mas parece que se eu não externar isso em algum lugar, vou acabar esquecendo.

![Wireframes Peakseekers](https://media.graphcms.com/H704qyVdTuyEwklaqbNJ)

De qualquer forma, acho essa parte fundamental porque já consigo através dos protótipos no papel, conseguir enxergar coisas que talvez não funcionam muito bem na hora de usar a interface, mesmo que na minha cabeça faça sentido. E com os rabiscoframes prontos, fica muito mais fácil trabalhar com UI.

Inspirado por alguns projetos no Dribbble, queria algo fora do convencional para o Peakseekers: uma aplicação mais monocromática, sem cores de destaque, usando apenas variações de branco e preto, e aí foi fácil achar uma paleta de cores no Coolors.

Com tudo isso em mãos, faltava só seguir algumas regrinhas de ouro de UI e _lansar a braba_ no Figma. Levei exatamente um mês para concluir o máximo que precisava antes de começar a desenvolver, e o resultado você confere [aqui](https://www.figma.com/file/zCzzKXRjiA9Pxfe0bVJLzE/Peakseekers-Mobile-LIGHT?node-id=0%3A1).

![Interfaces Peakseekers](https://media.graphcms.com/bvqV14paSkuPEAi3C5gM)

## A temida hora do desenvolvimento e porque eu amo o Next.js

##### Disclaimer: este tópico contém informações técnicas sobre o desenvolvimento. Caso não tenha interesse, pode pular para o tópico de Inspirações.

Assim como o UI, me planejei para finalizar a parte de desenvolvimento do Peakseekers em um mês. Mal sabia o que vinha pela frente…

Antes de tudo, nunca havia feito algo parecido com uma rede social antes, ainda mais usando React. Então, minha grande base para esse desafio foi esse [vídeo](https://www.youtube.com/watch?v=m_u6P5k0vP0&ab_channel=freeCodeCamp.org) de 12h da freeCodeCamp. Obviamente não assisti inteiro, mas as primeiras horas foram fundamentais para descobrir o que eu precisava fazer, e os desafios foram:

- Criar uma API para acesso ao Firebase através de Cloud Functions com Node.js;
- Criar um front-end com foco em performance e SEO (Server Side Rendering era obrigatório), afinal, estamos falando de um site que funcionará como um blog pessoal dos usuários;
- Multi-idioma (Português e Inglês) - Como disse acima, meu foco é o público dos Estados Unidos, mas queria também uma interface amigável para brasileiros;
- Light/Dark mode - Porque é bonito demais e sou viciado em dark mode 😆

Para todos os problemas sobre front-end, o Next.js caiu como uma… é, na verdade não foi tão fácil quanto parece. Mas de qualquer forma, usar Next.js como framework foi a melhor escolha que fiz para o desenvolvimento do projeto.

### Resolvendo os desafios

Eu tinha pouca experiência em back-ends com Node.js, mas o bootcamp da Rocketseat me preparou para o desafio de implementar um projeto real. Com base no vídeo que citei acima e uma infinidade de conteúdo sobre Firebase no Google (incluindo sua ótima documentação), não foi tão difícil criar a API do Peakseekers.

Os momentos de mais dificuldade foram criar os endpoints de perfil do usuário e da história (post), e principalmente, criar uma função para otimização de imagens enviadas pelo usuário, criando uma versão otimizada que sobrescrevia a imagem original, economizando espaço da Storage do Firebase e aumentando performance no client-side.

Quanto aos desafios relacionados ao front-end da aplicação, escolher o Next.js fez com que eu tivesse uma aplicação extremamente performática, com SEO otimizado e com um suporte na época básico para internacionalização, além de todas as vantagens já conhecidas de usar o React como base.

Através de muito estudo consegui usar grande parte do potencial do Next.js, desde as maravilhosas [rotas dinâmicas geradas estaticamente](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation), componentes estilizados com Styled Components e uma dolorosa configuração para internacionalização que explico mais abaixo.

Além disso, trabalhar com tema light e dark também acabou virando um grande desafio, por mais simples que pareça. Começou errado na parte de UI, quando acabei invertendo cores de forma errada nas duas versões, fazendo com que eu fizesse uma gororoba de variáveis css com o hexadecimal das cores (aprendi com esse erro em novos projetos).

Por fim, o Next.js (e até o Gatsby) não consegue lidar muito bem com isso em páginas estáticas. Ora, se eu sirvo um arquivo pronto para o usuário, como posso identificar seu tema e fazer a alteração? Pois é. Mais alguns dias de estudo e no final consegui implementar usando CSS nativo e o Theme Provider do Styled Components conforme descrito [aqui](https://hangindev.com/blog/avoid-flash-of-default-theme-an-implementation-of-dark-mode-in-react-app). Mas se fosse recomendar uma solução hoje, sem dúvida seria [essa](https://github.com/pacocoursey/next-themes).

### Internacionalização no Next.js

Comecei o desenvolvimento do Peakseekers em setembro, usando a versão 9.4 do Next.js. Nessa época (ok, não faz tanto tempo assim) ainda era um pouco complicado trabalhar com multi-idiomas. Se você juntasse isso a rotas estáticas, detecção do idioma do usuário e redirecionamento em rotas dinâmicas, aí meu amigo, você tinha um GRANDE trabalho pela frente. Felizmente com a ajuda da biblioteca [next-translate](https://github.com/vinissimus/next-translate/), alguns dias passando raiva e algumas adaptações técnicas (sim, você sabe do que eu estou falando), consegui deixar tudo funcionando da forma que eu queria.

Porém, hoje com a versão 10 do Next.js a história é diferente. Trabalhar com internacionalização ficou extremamente mais fácil, usando o código nativo do framework como pode ser visto nesse [vídeo](https://www.youtube.com/watch?v=QnCIjjYLCfc&ab_channel=VinissimusDevelopers). Ainda não tive tempo de fazer a mudança e eliminar códigos desnecessários, mas está na minha lista de tarefas.

### Sobre a experiência

No mais, desenvolver com Next.js foi maravilhoso. O hype sobre ele faz jus quando você começa a meter a mão na massa em um projeto com ele. Esse framework é o sonho de qualquer desenvolvedor que começou sua carreira há uns 10 anos atrás, quando era necessário fazer tudo quanto é tipo de configuração a fio para lidar com performance e escalabilidade, sendo que hoje o Next.js entrega isso pra você de bandeja.

Hoje o Peakseekers está hospedado na [Vercel](https://vercel.com/) integrado a um repositório no Github. CDN, serverless functions e ambiente de testes configurados com um clique. Obrigado, Vercel! ❤️

## Inspirações

Sempre é bom ter alguns projetos como inspiração. Mas confesso que o que mais me tocou nos últimos anos sobre produtos digitais, foi um episódio da ótima série [Abstract (S02E05)](https://www.netflix.com/br/title/80057883), com Ian Spalter, um dos Head de Design do Instagram.

Sobre aplicativos, a maior inspiração foi o [Lecheese.app](https://lecheese.app/) principalmente por também ter sido feito por um desenvolvedor ([Zeno Rocha](https://zenorocha.com/)), além de ter usado algumas tecnologias similares ao Peakseekers como pode ser visto [aqui](https://zenorocha.com/the-technology-stack-i-used-to-build-my-first-mobile-app/).

### Ferramentas usadas e links úteis

Graças a dias de pesquisa, consegui um compilado de ferramentas e links que podem ajudar desenvolvedores desde a ideia até a execução de um projeto. Use à vontade! :)

- [https://www.notion.so/](https://www.notion.so/) - Não só o projeto do Peakseekers, mas toda minha vida está documentada aqui;
- [https://visualsitemaps.com/](https://visualsitemaps.com/) - A melhor ferramenta para criação de sitemaps;
- [https://whimsical.com/](https://whimsical.com/) - Para criação de fluxos de usuários e outros diagramas;
- [https://www.productchecklist.co/](https://www.productchecklist.co/) - Um checklist para ser feito ao lançar um produto;
- [http://uxchecklist.github.io/](http://uxchecklist.github.io/) - Mais um checklist excelente;
- [https://coolors.co/](https://coolors.co/) - Para criação da paleta de cores;
- [https://lottiefiles.com/](https://lottiefiles.com/) - Animações usadas em microinterações no front-end, através da biblioteca Lottie;
- [https://heydesigner.com/](https://heydesigner.com/) - Minha fonte diária para estudos, com vários posts sobre produtos digitais, UI/UX e Front-end;
- [https://dribbble.com/](https://dribbble.com/) - A maior fonte de inspiração para UI;
- [http://youtube.com/rocketseat](http://youtube.com/rocketseat) - A maior fonte de conteúdo em português sobre React e Next.js;
- [https://youtube.com/devsoutinho](https://youtube.com/devsoutinho) - Tutoriais básicos e avançados sobre React e Next.js com uma ótima pitada de humor;
- [https://youtube.com/willjusten](https://youtube.com/willjusten) - Estou citando o canal do Willian Justen, mas vale citar também seus cursos e o excelente Slack dos alunos que acaba servindo como uma fonte de notícias sobre desenvolvimento.

## O que vem pela frente? (To do)

Antes de mais nada, é legal ver como a tecnologia evolui rápido. Ao ver o código usado no Peakseekers, vejo o tanto de coisa que poderia ter sido feito de forma diferente hoje. De qualquer forma, tenho uma lista de tarefas relacionadas a melhorias e desenvolvimento de novas funcionalidades (aquela história de não deixar um produto morrer):

- Melhoria em UX, principalmente na página de criação da história;
- Refatoração de código para aproveitamento de funções nativas do Next.js;
- Melhorias de performance na API com o Node.js.

E caso o projeto ganhe certa popularidade:

- Novas funcionalidades (preview da história, rankings, página de “expedição” para atualização em forma de histórias curtas, e envio de mensagens para usuários);
- **Aplicativo nativo para iOS e Android**.

## Conclusão e agradecimentos

Ao contrário do que possa parecer, o Peakseekers não foi um segredo. Desde a primeira ideia corri para alguns amigos para contar o que estava planejando, e o que eles achavam. E aqui quero destacar [Heitor Martins](http://heitormartins.com.br/) e [Renan Bonin](https://renanbonin.com/), dois parças fodas que além de excelentes profissionais, sempre propuseram ideias e estavam abertos a ouvir sobre o que estava sendo desenvolvido.

Também agradeço a galera de alguns trabalhos antigos e principalmente alguns da [Fitcard](https://www.fitcard.com.br/) (meu trabalho atual), que foram os primeiros usuários reais a testar a plataforma. Um grande abraço, seus lindos!

Esse post ficou gigante, e a intenção era essa. Na verdade, ainda deixei muita coisa para trás. Mas quero que ele sirva como inspiração para alguém que tenha alguma ideia similar, ou até mesmo queira saber mais sobre como um desenvolvedor pode ter uma visão mais voltada para produtos.

E ANTES QUE EU ME ESQUEÇA, o Peakseekers é uma rede social open source! Seu [código-fonte está aqui](https://github.com/jofelipe/peakseekers) e pode ser _forkado_, melhorado e usado como referência sem moderação!

Por fim, se você tiver qualquer dúvida sobre o processo e quiser bater um papo, me encontre no [Linkedin](https://linkedin.com/in/jofelipe) ou em [hi@jofelipe.com](mailto:hi@jofelipe.com). Um abraço e _se cadastre-lá por favor_.


Blog

Utilizando OG Image Generation do Next.js para criar imagens dinâmicas

O que aprendi em 10 anos desenvolvendo para a Web

</2021>

Criando uma rede social. Do zero.

2019 — Meu ano em livros

Hackear pessoas é mais fácil do que hackear sistemas

De Milão para Maranello. Conhecendo a casa da Ferrari

</2022>

Meu primeiro Design Sprint

</2020>

Minha primeira (e péssima) experiência acima dos 5000m

Criatividade, ideias boas y otras cositas más

Lac Blanc — Minha primeira trilha nos Alpes