IMG_20210627_120354.png

ezgif-2-821c37bba850.gif


Olá tudo bem? Essa semana de [Next Level Week](https://nextlevelweek.com) foi intensa e INCRÍVEL, nela construí junto com a comunidade da [Rocketseat](https://rocketseat.com.br) o GamePlay. Um app para agendar e organizar partidas que ocorrerão em servidores do [Discord](https://discord.com).

Já tenho bastante experiência com o [React Native](https://reactnative.dev) porém a cada edição vejo algo novo  e nessa o aprendizado foi com:
- Linear Gradient.
- [Discord API.](https://discord.com/developers)
- Autenticação com OAuth2 no Expo. Sem o uso de sistemas pré-prontos como GoogleSignIn.
- Componente Modal do React Native.
![Telas da Aplicação](firebase://assets/IMG_20210627_120354.png)
## A Aplicação

Nesse vídeo [aqui](https://youtu.be/jlKJ96m_8HE), mostro como ficou a aplicação, como na Rocket gostamos de pegar a milha extra nessa missão fiz algumas melhorias na aplicação:
- Uso do meu queridinho React Native Flash Message.
- Função de deletar a partida criada. Usando uma animação de deslizar um item da lista ao lado.
- Melhorias no login. Só lendo o código para ver kkk.
- Uma animação do [Lottie](https://lottiefiles.com) ao não encontrar partidas e servidores.
- Frase de boas vindas randômicas.
- E modal de log out com estilo proprio app.
- E uma melhoria pequena nas Android Status Bar e Android Navigation Bar(consultar arquivo app.json)

## Um app feito no celular

Pretendo criar um post falando com mais detalhes como faço isso. Mas simplificando(para devs), uso o app [Termux](https://termux.com) para se conectar via SSH a uma VM gratuita no [Google Cloud Shell](https://cloud.google.com/shell). Nessa VM tem o editor [NeoVim](https://neovim.io) configurado para programar em Typescript com suporte a InteliSense, também há instalado o [NodeJS](https://nodejs.org). E vejo como o app está ficando no [Expo Go](https://expo.io/client) com a aplicação rodando em tunnel.

## Finalizando

Foi uma semana divertida, intensa, incrível e com muito aprendizado, que aliás é contínuo e isso significa que estarei participando de edições futuras, e procurando saber mais sobre o universo React Native. Agradeço de coração a equipe da Rocketseat por proporcionar esse conteúdo fantástico, com tanto amor, carinho e empenho.

Você pode conferir o código do projeto [aqui](https://github.com/gsbenevides2/gameplay). Lá contém instruções de instalação e o APK. Muito obrigado por ter lido até o final.
![Flores vermelhas em movimento ao vento  do EP 9 de Eighty-Six.](firebase://assets/ezgif-2-821c37bba850.gif)

Aplicação construída durante o NLW Together.

Um app construído no celular

IMG_20210622_201618.png

to_aru_kagaku_no_railgun_s-02-misaka.jpg


Olá, tudo bem? Então hoje falarei sobre como tentei resolver um problema que acontecia aqui na chácara que moro. Atualmente um bicho misterioso vem sequestrando e matando as galinhas e galos do terreiro e da vizinhança, ele aparece depois que sol cai até o nascer do dia seguinte, e vem deixando um prejuízo enorme. Já construimos um puleiro(casa onde as galinhas dormem a noite) mas mesmo assim não solucionou o problema, fizemos armadilhas, ficamos de tocaia a noite e nada de captura-lo.

Então tive uma ideia usar celular como câmera de segurança, e aí começa o desafio.

## Problemas e Soluções

> A função do desenvolvedor é criar soluções para os problemas através do uso de tecnologias disponíveis.

Após pesquisas, descobri sobre o uso do [WebRTC](https://developer.mozilla.org/pt-BR/docs/Web/API/WebRTC_API) para realizar a comunicação de vídeo em tempo real, queria implantar em um app usando React Native Expo porém não foi possível por [limitações técnicas](https://expo.canny.io/feature-requests/p/webrtc). Então decidi utilizar o navegador mesmo, usando um servidor com cors, express, [socket.io](http://socket.io) e outras coisas e assim, fiz uma câmera de rede local usando apenas dois celulares Android.

## Como instalar

No dispositivo que irá capturar as imagens:
1. Você deve ter o app Termux instalado.
1. Abra o app e digite esses comandos:

```bash
apt update
apt upgrade
pkg install nodejs-lts git
git clone https://github.com/gsbenevides2/chicken-camera
cd chicken-camera
npm install
npm run start
```
1. Se tudo der certo você verá um aviso de que o servidor foi iniciado.
1. Ligue o roteador wi-fi do celular.
1. Agora abra [http://localhost:3000/sender](http://localhost:3000/sender)

No aparelho que vai ver as imagens:
1. Conecte-se a rede wi-fi que você criou.
1. Abra [http://192.168.43.1:3000/receiver](http://192.168.43.1:3000/receiver)

Pronto clique em recarregar e você verá as imagens.
![Tela de Visualização e Tela de Gravação](firebase://assets/IMG_20210622_201618.png)
## Deu certo?

A aplicação está funcionando perfeitamente, fiz alguns testes de campo, porém por problemas de sinal wi-fi e tempo, não consegui testa-la em campo. Além disso, não pretendo mais usá-la , pois até a data dessa publicação o animal misterioso nunca mais apareceu e espero que não apareça mais.

## Finalizando

Consegui extrair poucos conhecimentos em WebRTC e bastante conhecimento em comunicação em tempo real e API de acesso a câmera do navegador. Caso queira conferir o código do projeto ele está [aqui](https://github.com/gsbenevides2/chicken-camera). 

Agradeço por te lido até aqui é tenha um ótimo dia.
![Mikoto Misaka do anime Toaru Kagaku no Railgun acenando.](firebase://assets/to_aru_kagaku_no_railgun_s-02-misaka.jpg)

Projeto de criar uma câmera para o galinheiro.

Cameras no Galinheiro

splash.png

flash-message.png

profile-image.png

week.png

thanks.gif


> **Aviso**: Caro leitor em decorrência do update do blog esse post não foi publicado a tempo. Então não estranhe a falta de nexo nas datas. Há e aproveite que as inscrições do NLW estão abertas. (13 de Junho) Gui.

Olá tudo bem? Nessa semana passada (18 á 24 de Abril) ocorreu a Next Level Week 5, um evento da [Rocketseat](https://www.rocketseat.com.br) que busca levar os programadores para o próximo nível. Nessa semana criamos uma aplicação em React Native que lembra o usuário de regar suas plantas. E nesse post falarei sobre as experiências adquiridas do nessa jornada, então let's go.
![Splash Screen do App Plant Manager](firebase://assets/splash.png)
## Mas antes quem é Rocketseat?

A Rocketseat é uma empresa que ensina programação, ela é sediada em Santa Catarina, mas  espalha seu conhecimento pelo resto do Brasil e do mundo,  recentemente fez uma fusão com a [Shawee](https://shawee.io), empresa que realiza diversos hackathons.

## O que é o NLW?

A Next Level Week é um evento intenso, onde aprende-se de forma prática e rápida, os fundamentos do Node, React, React Native, Elixir e Flutter, separado por trilhas focadas em cada umas das tecnologias mencionadas, o objetivo é avançar como programador, aprender e conhecer sobre o que há de melhor no mercado.

## Minha experiência

Já participei de edições anteriores do NLW e em edições da Omnistack (antigo NLW), e cada edição aprendo algo novo. Mesmo eu sabendo bastante sobre React Native, a cade edição que participo, me surpreendo e adquiro mais conhecimentos sobre o algo que eu ainda não sabia.

## A milha extra e o Never Stop Learning

O dilema da instituição é Never Stop Learning (Nunca pare de aprender), durante o evento aprendemos que o aprendizado é contínuo e que sempre podemos aprender e avançar mais. E graças a isso temos a milha extra, onde vamos além  na aplicação, então veja as melhorias que fiz em nessa semana(26 á 30 de Abril):

### Troquei o Alert pelo react-native-flash-message
![Exemplo da mensagem de erro.](firebase://assets/flash-message.png)
Os alerts ficaram mais bonitos e estilosos e da pra entender com a cor vermelha que se trata de um erro.

### Adicionei um botão para adicionar foto do perfil
![Demonstração do ícone de câmera.](firebase://assets/profile-image.png)
No layout construído no Figma, tinha uma imagem de usuário, porem não foi desenvolvido uma forma de adicionar a imagem.

### Melhorei a navegação entre às rotas.

Agora quando o usuário passa pela etapa de configurar o nome, ele não precisa configurar novamente na proxima vez que abrir a aplicação, e cai direto na página de selecionar plantas.

## Outras coisas mais:
-  StyledComponents.
- Escolher quais dias da semana deseja regar as plantas.
![Screenshot da tela de editar planta.](firebase://assets/week.png)- Melhoria nas notificações.

## Finalizando

Caso queira ver como ficou a aplicação acesse [aqui](https://github.com/gsbenevides2/nlw-05-plantmanager), o repositório dela.

Foi uma semana incrível e a única coisa que tenho a dizer é obrigado. Muito obrigado ao time de educação do Rocketseat por proporcionar esse evento incrível. Muito obrigado a comunidade no Discord, sempre empenhada em ajudar o próximo. Então é isso, obrigado por ter lido até aqui, e até mais🚀
![Garota de anime segurando uma lousa escrito obrigado.](firebase://assets/thanks.gif)

Uma semana puxada porém incrível 🚀

Screenshot_20210609-115143.png

IMG_20210609_142816.png

IMG_20210609_145334.png

Screenshot_20210609-172230.png

IMG_20210609_171810.png


Seja bem vindo meu caro internauta, faz tempo que o blog saiu do ar, mas volto com novidades, nessa nova versão do site, temos várias melhorias e novidades então vamos lá:

## Em um novo local, mas no mesmo lugar

Agora estamos em um novo domínio, saí de [gsbenevides2.vercel.app](https://gsbenevides2.vercel.app) para [gui.dev.br](https://gui.dev.br). Porém ainda continuo usando a infraestrutura parruda e gratuita da Vercel. Qualquer requisição feita ao domínio anterior irá cair no novo, graças ao 307 do HTTP.

## Atualização da Versão do Next e do Webpack

Migrei do NextJS 10.0 para o 10.1, como resultado obtivemos melhorias no carregamento de fontes, otimização de images, tempo desenvolvimento de features, acessibilidade, página de 500 de erro interno do servidor personalizada. Tudo isso junto com a atualização do Webpack 4 para 5 fazendo o processo de build seja mais rápido.

## Agora este site é um PWA

Os PWA's são aplicações progressivas da Web, eles simulam e se aproximam a experiências de aplicações nativas, podendo ainda ser instaladas na gaveta de apps dos smartphones e PCs. Tudo isso graças aos trabalhadores de serviço e as estratégias de cacheamento de estáticos, fazendo com que além do site carregar mais rápido, funcionar sem rede de internet se possível. Um exemplo bem sucedido de PWA é o Twitter Lite.
![Splash Screen do PWA](firebase://assets/Screenshot_20210609-115143.png)
## Melhorias de SEO e Acessibilidade

O SEO serve para que a IA da Google consiga entender o que tem dentro do site. Nessas melhorias incluem as metas tags. E HTML mais semântico e com tags de acessibilidade para inclusão.
![Demonstração do link no Discord, Facebook e Twitter.](firebase://assets/IMG_20210609_142816.png)
## Uma cor, um tema, um padrão

O site agora não utiliza mais cores padrões do CSS, 
como cinza, branco e preto. Tem sua própria paleta de cores. Baseada em tons escuros. Com cores primária, secundária, de background e etc. Também troquei a fonte de Roboto para Open Sans.
![Exemplo da Fonte e Demonstração das Cores.](firebase://assets/IMG_20210609_145334.png)
## Integrado com Notion, para publicar mais rápido

O Notion é a ferramenta que uso para escrever os posts. Antigamente o fluxo de publicar ou atualizar um post era:
1. Primeiro exportava para Markdown o post no Notion.
1. Criava uma pasta em um projeto separado no GitHub. Nessa pasta tinha que ter tudo organizado pois caso um arquivo estivesse incorreto ou em local errado. Ocorria erro.
1. Ao fazer commit sinalizava o nome do post e logo após o push no repositório remoto, uma Github Actions é disparada e usando um software em NodeJS, que era responsável por buscar o nome do último commit, entender os arquivos, enviar para o Firebase os arquivos e o post e por último disparar as WebPush Notifications via Firebase Cloud Mensaging.

Agora:
1. Acesso o site em uma url específica.
1. Coloco o link compartilhado do Notion e a senha de segurança.
1. Um backend em NodeJS fica responsável por interpretar o conteúdo do Notion, extrair, organizar e preparar os arquivos e conteúdo.
1. Antes de publicar tenho um Preview da publicação de como ela ficaria no site e se estive tudo certo finalizava o envio, e envia as notificações.

Além de ser mais fácil publicar agora é mais fácil excluir e atualizar posts.

## Nova Tela de Erro

Além de melhorar o layout da tela de 404 Página Não Encontrada temos as novas de 500 Erro Interno do Servidor e  PWA Offline. Junto de novos Easter-Eggs para cada uma delas.
![Demonstração da Tela de Erro.](firebase://assets/Screenshot_20210609-172230.png)
## Políticas, Google Analitics, WebMaster, Monitoramento de Performance do Firebase, etc
- Agora temos uma página de Política de Privacidade, Uso de Dados e Termos de Serviço.
- O uso do Google Analitics foi descontinuado e qualquer dado colhido por ele já foi marcado para exclusão.
- O domínio foi registrado como propriedade no WebMasters do Google.
- O monitoramento de performance do Firebase também foi descontinuado.
- Melhorias no desenvolvimento com a migração do projeto no Firebase.
- Melhorias de layout principalmente para computadores e dispositivos de tela larga como tablets. Pequenas melhorias para celular pois trabalho com Mobile First.
- Pequenas mudanças na Home e no Currículo.
- Gesto Swipe nos cards na tela de Currículo.
- Melhorias nas notificações via WebPush.
- Melhorias no contador de Visualizações das postagens no blog.
- Melhorias de performance com resultados colhidos do Lighthouse.
- Otimização de imagens com uso do Next Image Optimization.
- Melhoria no tipo conteúdo suportado pelo conversor de Markdown.


![Tsukasa do Anime Tonikaku Kawaii. Ao lado escrito Obrigado por ler. Até breve](firebase://assets/IMG_20210609_171810.png)
Creditos da Tsukasa: [https://www.deviantart.com/fifthsilence/art/Tsukasa-chan-Tonikaku-Kawaii-860619511](https://www.deviantart.com/fifthsilence/art/Tsukasa-chan-Tonikaku-Kawaii-860619511)


Novidades sobre a atualização do Blog e Site.

Uma Grande Atualização

meu-vim.png


Olá meu consagrado tudo bem? Hoje vim falar sobre o tão aclamado [Vim](https://www.vim.org/), odiado por uns que nunca conseguiram sair e ficaram presos na linha de comando, e amado pelos que gostam de terminais e keybinds. Mas se você não sabe, o ele é um editor de texto, clone do VI, onde toda sua interface é através do terminal.

Eu pessoalmente uso o [NeoVim](https://neovim.io/), uma cópia melhorada do Vim, uso ele pelo fato de não eu possuir computador, então programo minhas aplicações através do celular, e rodar editores de código complexos como [Visual Studio Code](https://code.visualstudio.com/) é complicado. Além disso uso uma máquina no [Google Cloud Shell](https://cloud.google.com/shell), e me conecto a ela através de SSH no [GCloud CLI](https://cloud.google.com/sdk/gcloud), então a única interface que tenho de comunicação com a máquina é o terminal.

## Minha opinião

Não existe o melhor editor de código. Pense no editor como uma ferramenta de trabalho, a melhor ferramenta é a que lhe torna mais produtivo, então se você é mais produtivo no vim, use vim, se é melhor no VSCode use-o, só use aquilo que lhe torna melhor.

## Vantagens e Desvantagens

**Vantagens:**
- Faz tudo via teclado, isso é uma vantagem para quem é bom com atalhos de teclado e comandos.
- Muito otimizado, pelo fato de não ter UI(Interface de Usuário) complexa com botões, menus e caixas de texto.

**Desvantagens:**
- Talvez você acha ele difícil de aprender (principalmente no começo) a usa-lo, pela falta de UI, exigir comandos para opera-lo.

## Minha configuração
![Demonstração do meu NeoVim.](firebase://assets/meu-vim.png)
Tanto o NeoVim como o Vim são altamente configuraveis e tem suporte a plugins (extensões). Aliás os plugins são essenciais para o desenvolvedor em minha opinião. Deixarei a lista de alguns plugins aqui:
- [CoC:](https://github.com/neoclide/coc.nvim) Usado para inteligência de código, o InteliSense do VSCode para vim.
- [QuickUI](https://github.com/skywind3000/vim-quickui): Uma UI construída sobre o terminal, com menus, listas e popups.
- [Drácula](https://github.com/dracula/vim): Um tema perfeito para os Devs.
- [Vim-Plug](https://github.com/junegunn/vim-plug): Um gerenciador de plugins.

Minha configuração está disponível nesse [repositório](https://github.com/gsbenevides2/neovim-config), ela vem com vários plugins já configurados para desenvolvimento com Javascript, HTML, CSS, Typescript e JSON. Use e abuse-a, faça o que quiser com ela, e abra issues para me mostrar plugins e etc.

## Finalizando

Obrigado por te lido até aqui, beijos no seu coração e até mais.


Meu Vim

artists.png

new-options.png

playlists.gif


Seja bem vindo meu caro leitor. Hoje estou lançando a versão 3.0 do meu player de músicas, o Musicius. Irei lhe mostrar algumas das novidades a seguir.

## Playlists
![Exemplo da playlist.](firebase://assets/playlists.gif)
Agora é possível criar playlists, assim você pode selecionar somente aquelas músicas boas para lavar louça, ou então as que tem uma vibe perfeita para festas. Você pode escolher a ordem das músicas do mesmo jeito que tem na tela "Reproduzindo Agora" com o arrastar e soltar.

## Aba de Artistas
![Novas telas de artista.](firebase://assets/artists.png)
Nessa aba você pode tocar suas músicas pelos seus artistas favoritos. Então agora você pode ficar somente na vibe Indie Rock com Imagine Dragons, ou eletrônica com o eterno Avicii. Além disso, caso um artista tenha deixado você puto, você poderá excluir todas as músicas dele com um clique.

## Performance

Uma coisa é certa, meu app tem vários problemas de performance, alguns muito sérios. Infelizmente muitos deles são causados pelo Expo framework utilizado em sua construção, porém em todas atualizações venho trabalhando fortemente em corrigir problemas de performance, e nessa não foi diferente. Você verá mais telas de carregamento com spinners e avisos de erro ou sucesso. Também fizemos uma otimização nas imagens das listas de músicas, sua qualidade foi reduzida para não sobrecarregar o RN, porém você não notará muita diferença visual.

## E Outras Coisas
![Lista das novas opções.](firebase://assets/new-options.png)
Agora você consegue:
- Exportar e importar o banco de dados de músicas.
- Apagar todas as informações do app.
- Alteramos o botão três pontos/opções nas listas de músicas.
- E algumas coisas que eu com certeza esqueci.
- E algumas melhorias por debaixo dos panos, como um pouco de refatoração de código, para facilitar as implantações futuras de features.

## Como Atualizar

Como não houve uma atualização do SDK do Expo em si, essa atualização virá através do over-the-air. Então você só precisa abrir a aplicação e aguardar alguns minutos. Não há nenhum aviso de atualização então simplesmente: Abra o app. Use ele por uns minutos. Feche e abra o app novamente Caso não apareça a nova guia de artistas, repita o procedimento anterior com um intervalo maior de tempo. Mesmo assim, se não atualizar entre em contato comigo pelas redes sociais [aqui](https://gsbenevides2.vercel.app/#page_3).

## O Que Vem Por Aí

Primeiramente mais melhorias de performance, correção de bugs e refatoração de código. Em features estão: Compartilhar músicas via QR Code. Letras Também será dado início aos estudos sobre leitura e gravação de arquivos em memória interna e memória externa. Com objetivo de reproduzir e baixar músicas na memória local do aparelho sem a necessidade de uso da internet. Porém como é algo um pouco complicado exigirá bastante tempo para ser implementado.

## Finalizando

Então é isso meus amores, tenham um ótimo dia, e obrigado por ler até aqui.

[Github do Projeto](https://github.com/gsbenevides2/musicius)


Versão 3.0 do Musicius

new-player-vs-old-player.png

delete-modal.png

reproduction-screen.gif


Fala meu consagrado, como vai? Vim anunciar a versão 2.0 do meu player de músicas, o Musicius. Com esse app você pode adicionar músicas a partir de links do YouTube, para isso, ele usa a API do Deezer para obter os dados, e o próprio YouTube para obter a música. Então vamos às novidades.

## Mais opções de controle de Reprodução
![Antiga tela de reprodução versus a nova.](firebase://assets/new-player-vs-old-player.png)
Agora você tem opções para controlar como a lista de músicas será reproduzida:
- **Reprodução Aleatório:** A próxima música é escolhida aleatoriamente a partir das músicas não tocadas ainda.
- **Repetir:** Ao atingir o final da lista de reprodução a volta a primeira música, caso o aleatório esteja ativado ele escolhe a primeira de forma aleatória a a partir das músicas que já tocaram. E caso seja a primeira ele volta para a última música.
- **Lista de Reprodução:** Consulte tópico a seguir.

## Nova tela: Lista de Reprodução
![Gif da tela 'Reproduzindo Agora' com exemplo do drag and drop para ordernar músicas.](firebase://assets/reproduction-screen.gif)
Aqui você confere a lista de músicas que serão tocadas, alterar a ordem delas e remover.

## E algumas outras coisas
![Janela de informações da música.](firebase://assets/delete-modal.png)
Ao sair do app, a música,sua posição atual e sua lista de reprodução, serão salvas e estarão disponíveis na próxima vez que o app abrir. E você poderá continuar de onde parou. Agora é possível apagar músicas. E algumas melhorias internas como a atualização do Expo SDK 39 para o 40.

## Como atualizar

Infelizmente como teve uma atualização do SDK do Expo, não tem o Over-The-Air e terá que baixar o apk ou apks da nova versão. Mas não se preocupe as músicas continuaram intactas após a atualização.

## E o que vem por aí.

Na primeira versão foi pensado em criar o principal, que é tocar músicas a partir de links do YouTube. E foi um sucesso, então nessa nova versão tentei priorizar coisas que envolvem a reprodução de listas de músicas pois na próxima versão a prioridade será Playlists. Já foi desenvolvido também, o layout de algumas telas, entre elas a de artista e álbum. E provavelmente elas estarão disponíveis na próxima versão. Se você estiver interessado em baixar o app ou acompanhar o projeto acesse o github [aqui](https://github.com/gsbenevides2/musicius). E é só por isso por hoje, obrigado por ter lido. Até mais.


Nova versão 2.0 do Players de Músicas Musicius.

Versão 2.0 do Musicius

ate-mais.png


Fala meu consagrado, tudo bem? Primeiramente é uma honra ter você aqui no meu blog, fico muito feliz que você esteja me cedendo um pouco do seu tempo. Sem enrolações, irei dizer o que você encontrará por aqui:
-  Posts sobre meus projetos pessoais, como sites e apps que crio, com a finalidade de fortalecer minhas hard skills.
-  Nas publicações falarei sobre minhas experiências com linguagens e ferramentas de programação.
- Como irei realizar vestibulares e provas tenho que praticar minha escrita e comunicação. Então publicarei alguns artigos de opinião e redações.
- Também posso publicar qualquer coisa que eu achar pertinente ou legal.

Se você gostar do conteúdo sugiro você clicar no ícone de notificação que fica no canto superior direto da página, ou melhor no sininho. Prometo que não lhe enviarei spams e nem muitas notificações. Então é isso por hoje, nos veremos em breve.

```javascript
function start(){
   console.log('Hello')
}
start()
```
![Garota de anime acenando com um texto escrito 'Até mais'](firebase://assets/ate-mais.png)

Blog do Gui