⚡ MEUS ESTUDOS 🚀

Objetivo:

• Apresento a minha rotina e sequência de estudos diário na busca do aprendizado e evolução a cada dia.

• Contatos:
  

• Email: [email protected]
  

Javascript + Lógica de Programação

• Conceitos básicos de programação
• Algorítmos
• Essencial de lógica matemática para computação
• HTML5 e JavaScript
• Introdução ao JavaScript
• Variáveis, dados e tipos de dados
• Ordem de Precedência
• Armazenar Dados na variável
• Operações aritméticas
• Laços de repetição
• Vetores
• Funções

Javascript

• Variáveis e tipos de dados
• Operadores aritiméticos
• Operadores de igualdade e relacionais
• Funções
• Operadores lógicos
• Operadores unários
• Estrutura léxica
• Instruções condicionais IF
• Tipos de dados e objetos
• Métodos de objetos
• Truthy e Falsy
• Condicional ternário
• Escopo de variáveis e funções
• Retorno de funções com arrays e objetos
• Parâmetros de funções com arrays e objetos
• Operador vírgula e estrutura condicional switch
• Estrutura de repetição while
• Operador módulo
• Arrays - propriedade length
• Arrays - método "push()" e Loop "for"
• Importância de nomear funções
• Programação Funcional (Functional Programming)
• Escopo de funções
• Diferença entre console.log e return
• hoisting
• IIFE - Immediately-Invoked Function Expression
• Wrapper Objects
• typeof
• Laços (loops)
• Saltos
• Criação de Objetos (Object.create)
• Métodos de objeto
• Arrays - métodos
• Arrays - toString, concat, unshift e shift
• slice e splice
• forEach, every e some
• map e filter
• reduce e reduceRight
• indexOf, lastIndexOf e isArray
• Javascript no browser
• Objeto this
• Objeto arguments
• use strict
• Objeto string
• Regex e RegExp
• setTimeout vs setInterval
• Propriedades e métodos de funções
• Getters e Setters
• Prototype
• Array-like e editorconfig
• Debug
• Modularização de código
• Scripts e eventos inline
• Eventos
• Module Pattern - closure
• Objeto Date
• Método Math
• REST API
• Sync vs Async
• JSON vs Objeto
• Ajax - Implementando server
• Ajax - XMLHttpRequest
• Ajax - Fetch API
• Ajax - Axios
• Ajax - Ajax com jQuery
• Ajax - Carregando HTML via Ajax
• Testes
• TDD Style
• Mocha e Code Coverage
• Uglify
• Sourcemaps
• Classes

jQuery

• Entendendo o jQuery
• Selecionando elementos
• Modificando HTML
• Manipulando atributos
• Manipulando CSS
• Eventos
• Animação
• Plugin

React JS

• Introdução ao Módulo
• O que é o React
• O que são Components e porque eles são importantes
• Criando elementos aninhados
• O que é JSX
• Aninhando com JSX e criando componentes
• Webpack - O que é?
• Webpack - Configuração básica
• Webpack - Versões e dependências
• Webpack - Usando server
• Webpack - Modularizando a aplicação
• Webpack - Criando aplicação
• Webpack - Usando sistema de módulo so ES6/2015
• Webpack - ES Modules
• Webpack - Configurando JSX no babel e sourcemaps
• Webpack - Configurando aplicação para usar o React hot loader
• Webpack - Colocando o hot loader para funcionar
• Webpack - Configurando ferramenta de lint
• Como o React atualiza as views
• Agrupando components
• Dividindo e reutilizando components
• Props
• Atributos do HTML
• getDefaultProps
• Passando outros tipos de dados via props
• Renderizando componentes com funções puras
• Renderizando componentes com classes do ES6/2015
• Renderizando multiplos components
• Renderizando multiplos elementos no JSX
• Conhecendo a prop "key"
• Problemas ao duplicar a "key"
• Eventos
• A prop "children"
• Composição
• State
• Passando evento por parâmetro para component
• Entendendo arrow funcionts
• Stateful vs stateless
• Renderização condicional
• Lifecycle dos componentes
• Lifecycle: fluxo de montagem / desmontagem
• Lifecycle: fluxo de atualização (componentWillReceiveProps)
• Lifecycle: fluxo de atualização (shouldComponentUpdate)
• Lifecycle: fluxo de atualização (componentWillUpdate)
• Lifecycle: fluxo de atualização (componentDidUpdate)
• propTypes
• Hooks
• Constrolled e Uncontrolled components
• Controlando formulário no React
• Formulários (checkbox e radio)
• Formulários (selext e option)
• Formulários (textarea)
• Formulárop (controlando múltiplos inputs)
• Eventos para componente de formulário
• setState é assíncrono
• Conceitos e tipos de componentes com React
• Formas de fazer "bind" do this em eventos
• Entendendo o spread operator do ES6/2015
• Trabalhando com libs de terceiros junto com React
• Overview sobre testes
• TDD
• Testes unitários em componentes
• Conhecendo o create-react-app
• Jest (overview)
• Jest na prática - Instalação e configuração
• Jest na prática - Conhecendo as funções para testes e asserção
• Jest na prática - code coverage
• Jest na prática - Integração com ES6/2015
• Jest na prática - watch interativo
• TDD - Assertion tools e desafio método map
• TDD - método map
• TDD - aprendendo recursão
• TDD - map e map recursivo
• TDD - filter e filter recursivo
• TDD - every e every recursivo
• TDD - some e some recursivo
• TDD - reverse e reverse recursivo
• TDD - reduce e reduce recursivo
• TDD - reduceRight e reduceRight recursivo
• TDD - find e find recursivo
• TDD - testando exceções
• Conhecendo o Storybook
• Trabalhando com assets: configuração no Webpack
• Trabalhando com assets: HTML
• Trabalhando com assets: exportando CSS em um arquivo
• Webpack: gerando bundle de produção
• Webpack Dashboard
• Trabalhando com assets: modularizando o CSS
• Trabalhando com assets: CSS modules
• Trabalhando com assets: Critical Rendering Path
• Trabalhando com assets: otimizando o Critical Rendering Path
• Trabalhando com assets: ajustando ambiente de dev
• cross-env
• Criando alias no Webpack
• Configurando o Storybook
• Storybook - escrevendo histórias reais
• Storybook - extendendo o webpack.config padrão
• Storybook - localização do arquivo de config, linter e static build
• Storybook - criando histórias para os outros componentes
• Paginação - criando o componente
• Conhecendo o Yarn
• Paginação - ambiente para testes
• Paginação - ambiente para testes - linter
• Paginação - implementação inicial
• Paginação - testando excessões
• Paginação - storybook
• Abstraindo configuração padrão do webpack
• Adicionando paginação na aplicação
• Colocando a paginação pra funcionar
• Trocando de página
• Adicionando parâmetros de paginação para os repositórios
• Ajustando os prototypes do state para paginação
• Acertando informações da paginação - página ativa
• Acertando informações da paginação - total de páginas
• Webpack - atualizando nosso boilerplate para webpack
• Atualização do Webpack - atualizando as dependências
• Atualização do Webpack - atualizar storybook e remover
• Atualização do Webpack - o que o tree shaking e como configurar
• ES6 - Promises
• Webpack clean plugin
• ES7 - async / await
• Adicionando async / await no nosso workflow
• Ajustando storybook
• Centralizar paths do webpack no common.js
• Introdução à code splitting
• CommonsChunkPlugin
• import() dinâmico
• Webpack - file-loader: imagens e outros assets além do CSS
• Webpack - urk-loader: imagens e outros assets além do CSS
• Webpack - raw-loader: pegando conteúdo de qualquer tipo de arquivo
• Webpack - adicionando o file-loader e url-loader no nosso boilerplate
• this.setState() - usando funções fazer atualizações em lote
• Configuração do proloader do storybook
• Conhecendo o PureComponent
• Introdução à context API
• Context API - Trabalhando com informações dinâmicas
• Context API - Resolvendo shouldComponentUpdate
• Context API - Atualizando context à partir da emissão de eventos
• Context API - Unsubscribe está funcionando?
• Higher Order Component (HOC) - Entendendo o que é um HOC
• Context API - Isolando o context usando HOC
• Testes - Conhecendo os snapshots
• Testes - Atualizando Jest no workflow e criando teste de snapshot
• Enzyme - Testando lógica em componentes
• O que é e para que serve o Redux?
• Conhecendo o Redux - Primeiro princípio
• Conhecendo o Redux - Segundo princípio
• Conhecendo o Redux - Terceiro princípio - Funções puras
• Conhecendo o Redux - Terceiro princípio - Reducer
• Primeiro contato com o Redux
• Criando nosso primeiro reducer com testes
• Adicionando redux na aplicação
• Como funciona o createStore()
• Criando a função createReducer()
• Instalação do React Router
• Componentes principais do React Router
• Criando mais de uma rota
• Problema na configuração do Webpack do boilerplate
• Rotas dinâmicas - passando parâmetros na rota
• Conceitos de SPA - O request de uma rota
• Conceitos de SPA - History API
• Conceitos de SPA - History API - evento onpopstate
• Conceitos de SPA - History API - método replaceState
• Conceitos de SPA - History API - resolvendo problema reload da página
• Componente Switch e Erro 404
• Rotas dinâmicas - definindo rotas específicas
• NavLink - componente especial para navegação
• Route - prop "render"
• Route - prop "children"
• React Pattern - Render Props
• Route Props - match e parâmetros opcionais
• Route Props - location (pathname e key)
• Route Props - location (hash)
• Route Props - location (search)
• Route Props - location (state)
• Route Props - history (location e length)
• Route Props - history (método push)
• Route Props - history (action)
• Route Props - history (navegação no history)
• Componente Redirect
• Componente Prompt
• withRouter()
• HashRouter
• Problemas conhecidos - Rota que não renderiz
• Novidades do React v16 - Fragment
• Novidades do React v16 - lazy e Suspense
• Novidade do react v16.8 - Hooks
• React Hooks - conhecendo o useState
• React Hooks - useState: atualizar com base no estado anterior
• React Hooks - useState: estados complexos
• React Hooks - useState: arrays e objetos
• React Hooks - efeitos colaterais
• React Hooks - useEffect: atualização condicional
• React Hooks - useEffect: executando somente uma vez
• React Hooks - Criando Hooks personalizados
• React Hooks - useEffect: simulando o componentWillUnmount
• React Hooks - Regras para o uso dos Hooks
• Novidades do React v16 - Context API

Webpack

• Visão geral Webpack
• Estrutura básica do projeto
• Sistema de módulo
• Configurando a pasta de saída
• Carregando arquivos CSS
• Externalizando arquivos CSS
• Atualização - dependência node-sass
• Carregando arquivo SCSS
• Desenvolvimento e produção
• Atualização
• Carregando arquivos e imagens
• Adicionando Webserver

Gulp

• Documentação do Gulp
• Entendendo o Gulp
• Instalando o Gulp e as dependências
• Fundamentos Gulp
• Introdução ao Babel
• Processando Javascript com Gulp
• Introdução ao Typescript
• Procecssando Typescript com Gulp
• Introdução ao SASS
• Processando SASS com Gulp
• Projeto SPA: Processando SASS com Gulp
• Projeto SPA: Criando a estrutura do Build
• Projeto SPA: Tasks dependências
• Projeto SPA: Tasks aplicação
• Projeto SPA: Tesks servidor

Node

• Entendendo o Backend
• Instalação e configuração do NodeJS
• Introdução aos módulos
• Módulos
• Executando códigos JS no Terminal
• Process: Entrada e saída padrão
• Criando um servidor web com Nodejs
• Detectando URL diferente
• Usando módulos de terceiros
• Sistema de módulos: Require
• Sistema de módulos: Exports
• Arquivo package.json
• Resposta JSON
• Instância Única vs Nova instância
• Objeto Global do Node
• Entendendo o 'this'
• Passando parâmetros entre Módulos
• Instalando Deps & Scripts
• Lendo arquivos
• Escrevendo arquivos
• Frameworks Web
• Chain of Responsibility
• Padrão Middleware
• Postman
• API com Express
• Tarefas agendadas com temporizador
• Entendendo o Backend
• Verbos e status HTTP
• Montando um servidor HTTP
• Arquitetura MVC
• Express
• Concentrando rotas
• Rota POST
• Parâmetros nas rotas
• Rotas PUT e DELETE
• Pacote MoethodOverride

React Native

• O que é React Native
• Configuração do ambiente
• Módulo
• Configuração do projeto
• Estrutura do projeto
• SafeAreaView
• Componente
• Módulos ECMAScript
• Componentes com propriedades
• React Fragment
• Botões
• Componente com estato (userState)
• Criando Snippet
• Comunicação direta e indireta
• Diferenciando iOS e Android
• Renderização condicional
• Conhecendo o props.children
• Renderização lista
• Componentes controlados
• Flexbox
• Componente quadrado
• Componente de classe: método render
• Componente de classe: passando props
• Componente de classe: estado
• Componente de classe: cuidado com o this
• Componente Mega-Sena
• React Navigation
• Versão offline

Firebase

• Apresentação Firebase
• Visão geral sobre o Google Firebase
• Recursos do Google Firebase
• Precificação do Google Firebase
• Preparando ambiente de desenvolvimento
• Definindo conteúdo inicial da aplicação (HTML, CSS e JS)
• Criando projeto no Google Firebase
• Autenticação por email e senha
• Gerenciando o estado da autenticação e exibindo o loading.gif
• Alterando a interfacei (GUI) para usuários autenticados
• Verificando emails de usuários
• Redefinindo senhas de usuários
• Autenticação pelo Google
• Autenticação pelo Github
• Autenticação pelo Facebook
• Autualizando dados básicos de usuários
• Removendo contas de usuários
• Centralizando o tratamento de erros
• Soluções de hospedagem do Firebase
• Configurando e hospedando a primeira versão da aplicação
• Teste de autenticação pelo Facebook (com HTTPS)
• Realtime Database - Introdução
• Realtime Database - Inserção de dados
• Realtime Database - Obtenção de dados
• Realtime Database - Remoção de dados
• Realtime Database - Atualização de dados
• Realtime Database - Definição de regras de segurança e validação de dados
• Realtime Database - Filtro e classificação de dados
• Cloud Storage - Introdução
• Cloud Storage - Envio de arquivos
• Cloud Storage - Exibição de progresso de uploads
• Cloud Storage - Controle de progresso de uploads
• Cloud Storage - Vincular arquivos e tarefas
• Cloud Storage - Obtenção de arquivos
• Cloud Storage - Remoção de arquivos
• Cloud Storage - Atualização de imagens de tarefas
• Refatorar aplicação
• Cloud Storage - Definição de regras de segurança e validação de arquivos
• Cloud Firestore - Introdução
• Cloud Firestore - Testes iniciais
• Cloud Firestore - Inserção de dados
• Cloud Firestore - Filtrar, classificar e obter dados
• Cloud Firestore - Remoção de dados
• Cloud Firestore - Atualização de dados
• Cloud Firestore - Definição de regras de segurança e validação de dados

MongoDB

• Banco de dados Não-Relacionais
• Sobre NoSQL
• Instalação e uso do MongoDB
• Manipulando dados
• Relacionando dados
• Associação entre Collections
• Operadores
• Instalação do Mongoose
• Mapeando Objeto-Documento
• Models e as Rotas
• Listando dados do Model
• Atualização e remoção de dados
• Create
• Read
• Update
• Delete
• Consulta com Lookup

ExpressJS

• Criando projeto
• Configuração & Launcher
• Tratando a primeira requisição
• Enviando dados
• Tipos de resposta
• Middleware
• Lendo dados da requisição
• Entendendo o Body Parser
• Comunicação entre módulos

Git e GitHub

• Entendendo Git e GitHub
• Instalação e configuração
• Essencial do Git
• Ver log de arquivos
• Diff de commits
• Remover arquivos
• Adicionar arquivos
• .gitignore
• Commit sem parâmetros
• git log
• git branch
• Criando respositórios
• Sincronizando ambiente local com o respositório
• Clonando repositório
• Trabalho em equipe (Melhorar histório de commits)
• Automerge - Remover conflitos
• Merge Tools
• Alterações sem espaço e git checkout
• git stash
• Logs personalizados
• Repositórios no Github
• Página de repositório
• Branches no Github
• Deletando branches
• Cache de senha
• Overview do repositório
• Configuração do repositório
• Configuração do perfil do usuário
• Markdown
• Upload README - gists
• Trabalho em equipe no Github
• Colaborando com projetos Open Source
• CI - Continuous Integration

Docker

• Matriz de desenvolvimento, containers e docker
• O que são containers
• Fundamentos
• Docker Hub
• Docker Lifecycle
• Executar, parar e remover
• Pesquisar imagens
• Docker Network
• Bridge Network
• Host Network
• Outros Network Drivers - none, macvlan e overlay
• Persistência de dados
• Bind mount
• Docker volume
• tmpfs - Persistindo dados temporariamente em memória RAM
• Containers e Microserviços
• User - defined bridge network
• Container links
• Docker commit
• Docker build
• Dockerfile
• CMD e ENTRYPOINT
• Docker compose
• Nova CLI
• Displinibilizando stack em microserviço Compose
• Sistema de banco de dados
• Owncloud
• FFMPEG - Ferramenta Linux
• KaliBrowser - Ferramenta Linux

ESNext

• O que é o ESNext
• Operador Rest/Spread
• Tagged template
• Map
• Set
• For Of
• Usando callbacks aninhadas
• Refatorando callbacks para promises
• Async/Await
• Promises

Angular

• Backend com JSON Server
• Visão geral Angular
• Conceitos essenciais
• Criando APP com o Angular CLI
• Conhecendo os arquivos do projeto
• HTML do AppComponent
• Instalar os componentes do material
• Componente cabeçalho
• Componente rodapé
• Componente navegação
• Elementos do Angular
• Componentes início
• Naveganod entre componentes
• Diretivas na prática
• Bindings
• Exibindo registros com o *ngFor
• Gerando componentes tabela
• Entendendo componente gerado
• Adicionando coluna ações
• Novos métodos
• Componente atualizar e excluir
• Exibindo mensagens de erro
• Atualizando títulos

VueJS

• Conceitos básicos
• Binding
• Eventos
• Diretivas: v-if, v-for e v-show
• Aplicando estilo CSS
• Template na Vue Instance
• Componente
• Diretiva personalizada

Electron

• Configurando projeto
• Ajustes iniciais e alteração do título da janela
• Interface gráfica
• Utilizando Electron IPC (Inter-Process Communication)
• Processando arquivos
• Teste de aplicação

Leandro Macedo