Abílio Azevedo

<h2>Ignite</h2>
Ignite é programa para acelerar a carreira do dev com os seguintes pontos:
<ul>
<li>Metodologia Pratica Foco e Grupo</li>
<li>Currículo alinhado com as necessidades do mercado.</li>
<li>Atitude com softwares skills.</li>
</ul>
<h3>Chapter I</h3>
Fundamentos do React.JS
Nesse módulo criamos a estrutura base de uma aplicação React utilizando ferramentas como Webpack, Babel, Webpack Dev server, SASS, Source Maps, Fast Refresh e descobriremos conceitos importantes do React como componentes, propriedades, estados e hooks além de aplicar o TypeScript no nosso projeto para adicionar tipagem estática à aplicação.
<h3>Chapter II</h3>
Primeira aplicação web com ReactJS
Nesse módulo construiremos uma aplicação front-end web completa utilizando conceitos e ferramentas importantes do ecossistema React como Styled Components, MirageJS, Context API, hooks, Axios e muito mais.
<h3>Chapter III</h3>
Fundamentos do Next.js
Nesse módulo entenderemos como o Next.js transforma a nossa maneira de desenvolver aplicações front-end e descobriremos conceitos importantes como SSR e SSG.
Back-end no front-end
Durante esse módulo entenderemos como o front-end se transformou nos últimos anos com a possibilidade de termos funções back-end (serverless) executando em um ambiente front-end.
Front-end JAMStack
É muito comum o desenvolvimento de aplicações front-end que não estão conectadas a um único back-end hoje em dia, por isso, aqui vamos entender o conceito de JAMStack e como conectar nosso front-end com um CMS.
<h3>Chapter IV</h3>
Construindo interfaces do futuro
Nesse módulo criaremos a interface de um painel administrativo contendo fluxo de autenticação, dashboard, listagem e cadastro usando Chakra UI (UI DECLARATIVA) no Next.js.
CHAKRA UI - USA EMOTION por BAIXO DOS PANOS (Para estilização do CSS)
Integra com Frame Motion
Apexcharts - Graficos
Data fetching e cache local (Data Fetch e Data Syncing)
Nesse módulo vamos utilizar o React Query para melhorar a experiência de uso da nossa aplicação criando uma camada de cache de dados entre o front-end e back-end.
Autenticação e autorização
Nesse módulo vamos entender como criar um processo completo de autenticação, autorização e refresh token dentro do React com Next.js permitindo controlar o acesso à rotas e componentes tanto no client-side quando server-side.
AUTH NEXT.JS
<ul>
<li>Usando Api própria para gerar token (JWT <a href="https://jwt.io/" target="_blank" rel="noopener">https://jwt.io/</a>)</li>
<li>Contexto de autenticação</li>
<li>Fizemos uma fila para refazer as requisições não autenticadas.</li>
</ul>
<h3>Chapter V</h3>
Performando apps com ReactJS
Uma preocupação comum no desenvolvimento de aplicações web é a performance e, por isso, nesse módulo entenderemos como performar aplicações com React entendendo como funcionam os algoritmos internos da biblioteca e todo fluxo de renderização de componentes.
Memo = Memoriza o componente, engloba o componente e pode-se colocar uma função para dizer quando renderizar ou não.
Deve ser aplicado com:
<ul>
<li>Pure Functional components</li>
<li>Render too often</li>
<li>Re-render with same props</li>
<li>Mediums and Large Components</li>
</ul>
useMemo = Memoriza funções e cálculos desnecessários - não recria na memória o valor. useMemo é memorizar um resultado de cálculo entre as chamadas de uma função e entre renderizações
<ul>
<li>Cálculos complexos;</li>
<li>Igualdade Referencial (quando repassamos aquela informação a um componente filho);</li>
</ul>
useCalback = Quando a gente cria uma função que vai ser repassada para o componente filho é importante que a gente use useCallback.
useCallback é memorizar o próprio retorno de chamada (igualdade referencial) entre renderizações
useRef é manter os dados entre as renderizações (a atualização não dispara uma nova renderização)
useState é manter os dados entre as renderizações (a atualização irá disparar uma nova renderização)
Virtualização - não rendenrizar componentes que não são mostrados. <a href="https://github.com/bvaughn/react-virtualized" target="_blank" rel="noopener">https://github.com/bvaughn/react-virtualized</a>
Bundle Analyzer - Analisar o bundle da aplicação para ver se está pesando o bundle. <a href="https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer" target="_blank" rel="noopener">https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer</a>
<a href="https://www.npmjs.com/package/react-native-bundle-visualizer" target="_blank" rel="noopener">https://www.npmjs.com/package/react-native-bundle-visualizer</a>
<img src="//images.ctfassets.net/bp521nfj3cq3/1bfAYIMQeh510NMY1AVcOG/2c869a08efc25153c7c88d56ebbbd8ff/polyfills.js.png" alt="Bundle">
Testes unitários no React
Nesse módulo vamos entender como criar testes automatizados de unidade dentro do React garantindo que nossos componentes e páginas continuem funcionando independente de novas manutenções. Tudo isso usando Jest e Testing Library.
<h3>Chapter VI</h3>
Deploy
<a href="https://create-react-app.dev/docs/deployment/" target="_blank" rel="noopener">https://create-react-app.dev/docs/deployment/</a>
<img src="//images.ctfassets.net/bp521nfj3cq3/16XuXsr8Ycbq6XPrHv0FGp/7463f449d158ca863240fc5661d1a3df/Screen_Shot_2021-05-27_at_17.00.01.png" alt="Deploy">
<h2>Higher</h2>
Além da trilha React.JS fiz o Higher, um curso não técnico com foco em desenvolver habilidades comportamentais e que ensina aprender a aprender:
<h3>Módulo 1</h3>
1.1 - Pensamento Investigativo
5-whys - perguntar 5 vezes por que até chegar a causa raíz
1.2 - Comunicação para Devs
1 - Conheça a sua audiência
2 - Adeque o vocabulário__
3 - Utilize as palavras de forma consistente
4 - Vícios de linguagem: Pleonasmo
5 - Como escrever as melhores perguntas em fóruns
1.3 - Expectativa x Realidade | Diagnóstico Pessoal
Faça uma lista de suas principais realizações/objetivos e identifique áreas para melhoria. Organize metas para o futuro.
<ul>
<li>Objetivo Crucialmente Importante (OCI):
Exemplo de OCI:
Pessoal: Viver uma vida saudável, com alimentação balanceada, podendo consumir refrigerante somente aos fins de semana, e manter uma rotina diária de exercícios físicos.
Profissional: Dominar a stack de Javascript e me aprofundar completamente em metodologias ágeis e organização pessoal e de equipe para poder me tornar o Product Owner (Líder de Produto) dos projetos da minha empresa.</li>
</ul>
1.4 - Inovação | Pense Simples
Nos tempos atuais, a palavra "inovar" vem sendo utilizada a todo momento, porém, raramente o ato de inovar realmente acontece. Nesta aula, você vai aprender que para inovar não é necessario ser o CEO de uma Startup, ou estar em uma equipe de uma multinacional. Inovação é simplicidade. Utilizando o livro "Pense Simples", do fundador da SambaTech Gustavo Caetano, iremos construir alguns insights para ajuda-lo a realmente inovar no dia a dia de desenvolvimento.
<h3>Módulo 2</h3>
2.1 Higher Case
Foi apresentado um cenário aonde eu como tech lead teria que solucionar o problema e justificar minhas decisões usando analise SWOT.
2.2 - Escuta Ativa e Feedback
Escuta ativa - escutar para entender ao invés de escutar para responder.
"Você nunca atinge seu potencial máximo por não saber como é visto pelos outros e o que precisamos melhorar" - Gemma Roberts.
Ser específico nos feedbacks.
2.3 - Transforme grandes problemas em vários pequenos!
Metodologia ICE Score (Impacto, Confiança e Resultado)
Impacto: Qual será o impacto da ação se funcionar?
Confiança: Estou confiante de que essa ação realmente funciona?
Esforço: Quanto tempo e esforço são necessários para esta ação?
Avaliar as tarefas de 1 a 10 em cada uma das perguntas acima. A que tiver mais pontos deve ser feito.
Matriz de Eisenhower: Urgente-Importante
“I have two kinds of problems, the urgent and the important. The urgent are not important, and the important are never urgent.” - Dwight Eisenhower, 1954.
<img src="//images.ctfassets.net/bp521nfj3cq3/Zzn8wbxzOQXw2FRzKwYqy/1776eaa400cd5ff86b7d25d878849c5a/Urgente.png" alt="Urgente">
2.4 Estímulos a criatividade
<ul>
<li>Saber escutar;</li>
<li>Absorver conteúdos de experts na área;</li>
<li>Fazer mais perguntas (Ser questionadora)</li>
<li>Buscar soluções prepara o cérebro para o surgimento de novas idéias</li>
<li>Faça atividades do cotidiano</li>
</ul>
<h3>Módulo 3</h3>
3.1 PENSAMENTO CRITICO
Remover pensamentos envesados
Pensamento equilibrado: Nem pensar pouco, nem muito que te leve a ficar paralisado.
Avaliar várias opções e deixar a mente mais elástica (mente aberta), não absolutizar idéias e processos.
Disposição para suspender o julgamento.
1 - Perceber uma dificuldade
2 - Definir o problema
3 - Dividir o problema em subproblemas gerenciáveis
4 - Analisar o problema em várias perspectivas
5 - Formular uma variedade de soluções possíveis
6 - Fazer uma observação ou experimento
7 - Decidir qual solução é a mais adequada
8 - Colocar em prática, ir para a ação
3.2 ORATÓRIA
Oratória não é um dom, e sim uma habilidade que pode ser treinada, como qualquer outra. Para convencer e sermos ouvidos nesse mundo tão alto e ensurdecedor, precisamos entender um pouco mais da arte de falar e encantar.
Medo de falar em público na verdade é o medo de estar vulnerável a situações que não são previsíveis. Com amigos que conhecemos a gente saber como os outros vão reagir.
Comunicar, fazer comum o que está na minha cabeça para outras pessoas.
<ul>
<li>Componente Corporal </li>
<li>Componente Vocal</li>
<li>Componente Verbal
Manter os componentes em sintonia/congruência.
Se assista em 3a pessoa para se auto analisar suas falas.</li>
</ul>
3.3 PRINCIPÍOS DE METODOLOGIAS ÁGEIS
Nesta aula você vai ver alguns princípios básicos e totalmente mão na massa para entender um pouco mais de metodologias ágeis e já sair aplicando no seu dia a dia.
“A capacidade de criar e responder às mudanças para ter sucesso em um ambiente incerto e turbulento” - Agile Aliance 
<ul>
<li>Kanban - Não precisa de uma equipe e visa gerenciar o fluxo de entrega contínua, conhecida como kanban board (posts-its)<ul>
<li>Visualizar seu trabalho</li>
<li>Limitar a quantidade de trabalho em andamento</li>
<li>Gerenciar fluxo;</li>
<li>Tornar regras do produto explícitas</li>
<li>Implementar ciclos de feedback</li>
<li>Melhorar colaborativamente e evoluir através de experimentações.</li>
</ul></li>
</ul>
3.4 MEU PORTIFÓLIO
Bora construir um portfólio? Dicas para melhorar e adicionar mais projetos que ajudam a demonstrar a qualidade de sua produção
<ul>
<li>Folio = Folha</li>
<li>Portifolio = Vitrine portátil de nossas habilidades</li>
<li>Talk is cheap, show me the code
<a href="https://github.com/firstcontributions/first-contributions" target="_blank" rel="noopener">https://github.com/firstcontributions/first-contributions</a>
github.com/freeCodeCamp/hot-to-contribute-to-open-source</li>
</ul>
<h3>Módulo 4</h3>
4.1 Você toma boas decisões(ponto de interrogação)
Tomar decisões nunca é fácil, porém, se você tem um plano de ação, consegue se arriscar mais e ter muitos mais acertos em suas decisões! O 5W2H está aqui para te ajudar nisso.
<img src="//images.ctfassets.net/bp521nfj3cq3/3qZ6bUSCHkNQT2FP8h4zlg/cea552554422915353a99da3eb5b49b3/_unat_.jpg" alt="5W2H">
4.2 Incentivo a criação de conteúdo
Técnica Feynmann:
<ol>
<li>Escolha um assunto (ou conceito)</li>
<li>Ensine – ou finja ensinar – para uma criança</li>
<li>Identifique os “buracos” na própria compreensão</li>
<li>Revise, organize e simplifique</li>
</ol>
4.3 Metodologias ágeis no dia a dia do mercado
Google, Apple, Rocketseat... O que elas tem em comum? Bom, vamos te dwr alguns exemplos como algumas grandes empresas e startups em desenvolvimento conseguem gerenciar toda a equipe e todos os projetos com a menor quantidade de gargalos possível!
<ul>
<li>Apple - times que rodam scrum</li>
<li>Google - o fracasso é parte do sucesso.</li>
<li>Rocketseat trabalha com time - Orbitas independentes com metodologias de cada um. Lideres são os copilotos e os sócios são os pilotos.</li>
</ul>
4.4 Marca Pessoal
Deixe sua marca, onde que que vá. Nessa aula vamos te mostrar a importância de construir sua marca pessoa para que você deixe seu legado positivo onde quer que apareça.
<ul>
<li>Reputação é tudo o que as pessoas falam quando você não está na sala.</li>
<li>Marca pessoal é para trabalharmos nossa reputação.</li>
<li>Criar conteúdo é um meio para transmitir nossa marca pessoal.</li>
<li>A marca não é o que vc diz, mas deve ser o que você é. (Não seja Faker), ser genuínos, originais e fieis ao que somos.</li>
</ul>
Vamos para o próximo nível!

Screen Shot 2021-05-28 at 16.30.48.png

Programa da Rocketseat para acelerar sua carreira como Dev, fiz a trilha de React.JS

Ignite - Trilha ReactJS

Imersão top para abrir cabeça e a visão de arquitetura de uma aplicação como um todo. Ter a mente curiosa de entender como as coisas funcionam, entender o todo, sair da zona de conforto.
Nessa imersão desenvolvemos uma aplicação para gestão de rotas de entregadores usando #react no front, #nestjs no backend, #kafka como mensageria, #kibana para visualizar os dados usando o #kafkaconnect, todo sistema em #docker e deploy usando #kubernetes.
<img src="//images.ctfassets.net/bp521nfj3cq3/inDjFhRg261OksizMUahX/5c341bd6e0c0795b2195a081cd01d148/Dina__mica_do_sistema.png" alt="Dinâmica do sistema">
Aula 1 - Kafka. Configuramos nosso sistema de mensageria.
<img src="//images.ctfassets.net/bp521nfj3cq3/1OAMNNkJ1qM6soVZH9lLl7/d6bb8d95b56f80549adace9477cb494c/Screen_Shot_2021-05-09_at_17.54.29.png" alt="Screen Shot 2021-05-09 at 17.54.29">
Aula 2 - Nest.js e o Backend orientado a microsserviços
<img src="//images.ctfassets.net/bp521nfj3cq3/3Or69ap2S9MIsV9f5hP2bb/be37b7183da44f4fb5cb76def75e1218/Screen_Shot_2021-05-09_at_17.52.07.png" alt="Screen Shot 2021-05-09 at 17.52.07">
Aula 3 - React.js Tempo real com websockets e geolocalização
<img src="//images.ctfassets.net/bp521nfj3cq3/6Yky02SQAi23hEsgIkAlU5/a8e259eae463462eeaa658f4a716028b/Screen_Shot_2021-05-09_at_17.52.41.png" alt="Screen Shot 2021-05-09 at 17.52.41">
Aula 4 - Kafka Connect, Elasticsearch e Kibana - Integração e visualização de dados
<img src="//images.ctfassets.net/bp521nfj3cq3/6vvA4eEe0GyXqH57p53qW8/48ec919010651bc5b6563546f3c194d4/Screen_Shot_2021-05-09_at_17.44.09.png" alt="Kibana">
Aula 5 - Kubernetes - Deploy e escalabilidade de aplicações
Fizemos o deploy de nossos serviços usando kubernetes no Google Cloud Provider (GCP) e a Confluent Cloud
<img src="//images.ctfassets.net/bp521nfj3cq3/7gZzh7PoGetoQb5ZtKJagT/225cb0cf2cc36fa3fa90dd93932b2d68/Screen_Shot_2021-05-09_at_18.35.02.png" alt="Screen Shot 2021-05-09 at 18.35.02">
Obrigado Wesley Willians Ramos da Silva e Luiz Carlos
REPO: <a href="https://github.com/codeedu/imersao-fsfc2" target="_blank" rel="noopener">https://github.com/codeedu/imersao-fsfc2</a>
#fullcycle #fullstack #frontend #backend

1619217323083.jpeg

Semana intensa de desenvolvimento de um serviço de rastreamento com rotas.

Imersão Full Stack & Full Cycle 2.0

Trabalhamos no desenvolvimento de um chat feito com Javascript Puro, Eventos, Protocolo Socket e Blessed para o UI no terminal.
Segue o repositório: <a href="https://github.com/kibolho/semana-js-expert30" target="_blank" rel="noopener">https://github.com/kibolho/semana-js-expert30</a>
<img src="https://images.ctfassets.net/bp521nfj3cq3/4fxFpQisncKkWCjaoVka6U/678b3a334018705c3fa18828634c7bfe/logo.png?h=250" alt="logo">

Screen Shot 2021-04-06 at 23.15.02.png

Aplicativo de Chat com Cliente e Servidor feito em Javascript.


Abílio Azevedo.

Semana Javascript Expert 3.0

Mais Histórias

Ignite - Trilha ReactJS

Imersão Full Stack & Full Cycle 2.0

NewsLetter