Autor: Gabriel Nobrega de Azevedo
Utilizando deste guia você concorda com os Termos de Utilização.
Last active
January 8, 2020 11:40
-
-
Save ganobrega/82d9f35131bbb946e927e2fceadf9aeb to your computer and use it in GitHub Desktop.
Guia para Desenvolvimento Moderno 🚀 | Autoria de: Gabriel Nobrega de Azevedo
Em desenvolvimento.
O ambiente em que você desenvolve deve ser organizado nos mínimos detalhes, para você ter uma alta produtividade e agilidade no desenvolvimento.
Os melhores sistemas operacionais para o desenvolvimento são sempre os mais atualizados do mercado.
- Windows 10 (Mais recomendado) 🥇
- Windows 8
- Ubuntu 18 (Mais recomendado) 🥇
- Elementary OS
- Arch Linux
- macOs Mojave (Mais recomendado) 🥇
- macOs High Sierra
[ 10.13.4 ]
Para melhor organização, deixo as pastas para códigos aleatórios ou pessoais separada da pasta de projetos que irão para produção.
Faço essa separação por meio de pastas dentro da raiz do meu usuário, para que fique mais fácil e rápido acessá-las pelo terminal.
Exemplo:
~/Workspace- Zona de trabalho~/Playground- Zona de testes ou projetos pessoais
Também separo as pastas, caso seja de algum job ou sub-projeto:
~/Workspace/Startup 1/API~/Workspace/Startup 1/WEB~/Workspace/Startup 1/APP
O básico que você deve ter em sua máquina são alguns itens que listarei abaixo.
O Node é uma plataforma que interpreta Javascript em tempo de execução para fazer processos de baixo nível como: Alocação de Memória, Modificação de Arquivos, Execução de Processos. Algo que não conseguimos no Javascript de navegador.
O NPM é um gerenciador de pacotes para projetos Node. Com ele é possível instalar módulos/bibliotecas para utilizar facilitar o desenvolvimento dos projetos.
O NVM é um programa de linha de comando que serve para gerenciador múltiplas versões de Node
O Visual Studio Code é um editor de texto, no qual você pode ter certeza que será mais prático para o desenvolvimento. Considero ele o mais completo para o desenvolvimento.
Dicas:
- Procure sempre deixar ele atualizado e utilziar o mínimo de extensões.
- Caso não tenha "Open with VSCode" em seu menu de contexto do Windows Explorer, corrija com esse tutorial: [Right click on Windows folder and open with Visual Studio Code]https://thisdavej.com/right-click-on-windows-folder-and-open-with-visual-studio-code/
O Back-End é responsável pela troca de informações com o Front-End.
Exemplo:
Quando colocamos nossos dados em campos de login e senha, o front-end envia os dados para o back-end, que recebe os dados via um método POST e retorna uma resposta para o front-end.
Um Web Server é um serviço que disponibiliza os arquivos (HTML, CSS, JS, PHP) para Web.
- NGINX
- WAMP
- XAMPP
As plataformas são as linguages que fazem o suporte para ouvir portas e assistir as requisições que são feitas do front-end.
- Node
- Java
- PHP
- Python
- Ruby
- ASP.Net
- Node.JS
- IndexDB
- MongoDB
- MariaDB
- Mysql
- WatermelonDB
- Oracle
- SQL Server
Ao pé da letra, o Back-End é como um SEDEX.
Nada mais é que entrega de dados. (Remetente e Destinatário).
Exemplo: Você faz um pedido para a loja te entregar um produto, a loja pega o produto e coloca no SEDEX para te entregar, e você recebe o produto.
Primeiro você deve saber literalmente o conceito de Back-End.
- Para que serve o Back-End
- Como funciona o Back-End
- Entender o roteamento básico (GET e POST em PHP)
- Fazer um roteamento com busca de dados do Mysql
-
Você sabe o básico de
GET e POST em PHP com Mysql?- Então estude:
- API REST
- Mongo DB
- Então estude:
-
Você sabe o básico de
API REST e Mongo DB?- Então estude:
- Node para Web
- Então estude:
-
Já possui conhecimento em
Node?- Então estude:
- Python para Web
- Ruby para Web
- Então estude:
O Front-End é a cereja do bolo.
Ele é utilizado para a troca de informações com o usuário através de interações na página ou sistema.
Quando um usuário insere o e-mail e senha (nos campos de login) e clica no botão Fazer Login, é o Front-End que fica responsável em coletar os dados, e enviar para o Back-End, que fazer toda a validação.
Também é possível fazer a verificação do lado do Front-End, mas é ai que surge as vulnerablidades.
-
Exemplo
- Coletar e somar todos os preços com a classe de CSS
.price, dos produtos que estão sendo exibidor para o Usuário dentro do Carrinho de Compras, e enviar para o banco o total da transação.
- Coletar e somar todos os preços com a classe de CSS
-
Problemas
Com outras palavras:
- Tudo que for interação com o usuário, em que ele precisa digitar ou interagir é Front-End.
Os Automatizadores e Bundlers são ferramentas que facilitam a juntar as peças do quebra-cabeça. Ou seja, compilar o SASS, Minificar o JavaScript, etc.
- WebPack - Compila modulos do JavaScript, permitindo carregamento por demanda.
- Gulp - Automatizador de tarefas. e.g
Crie uma tarefa de minificar e personalize o comando do jeito que quiser.
Utilizo sempre ícones desses sites, e nunca precisei pagar por nenhum ícone, apenas utilizar a Licença Gratuita.
- Ionicons - Ícones Premium, para iOs e Android, utilizado por muitos designers.
- Iconmonstr - Ícones e logos variados, em SVG, gratuitamente e sempre com os mesmos traços e estilos.
- UTF-8 Icons - Ícones nativos compatíveis com todos os dispositivos, sem necessidade de importar no CSS ou JS.
- Emoji - Ícones para MarkDown.
Os Frameworks são códigos prontos para serem utilizados em qualquer projeto, sem afetá-los de forma prejudicial.
Um Framework serve para você não precisar reinventar a roda, ou seja, se já existe uma solução para o problema, use-o. Caso não venha serví-lo totalmente, adapte-o.
Aqui vai uma lista de listas de Frameworks que são auditados pela comunidade GitHub e outras.
- Awesome Front-End - Syaning
- Awesome Front-End - AlicanteFrontend
- Awesome Front-End - Bommox
- Brunch - Já monta o esqueleto dos seus projetos sem precisar se preocupar com a infra-estrutura de pastas, somente com a tecnologia que será utilizada. Ele prepara tudo!
- Synap - Site para estudar, para aprendizado.
- Semantic Versioning 2.0.0 - Padrão para versões de lançamentos de projetos.
- BEM | Formatação para melhorar o seu código CSS.
- UELI - Barra de Pesquisa do MacOsx para Windows.
- Glass Browser - Browser Transparente.
- Block Bench - Moderno editor de modelos 3D.
- Filezilla - Software para envio de arquivos estáticos ao servidor (Mais conhecido).
- Deplfy - Software que torna mais fácil o envio de arquivos para o servidor.
- Sass2Stylus - Converter SASS para Stylus.
- Bash
- Fish
- Oh my zsh
-
ls -la- Exibe todos os arquivos dentro de um diretório (inclusive ocultos) -
su - {login}- Trocar de Usuário -
sudo pkill -f {aplicação}- Finaliza a aplicação -
ps - aux | grep {arquivo/aplicação}- Procurar processo com o nome do arquivo ou nome da aplicação -
{arquivo} | grep {parametro}Procura o parametro dentro de um arquivo -
scp {remetente} {destinatário}- Transferir arquivos/diretórios de Remetente -> Destinatário- Remetente: e.g
root@exampleserver.com.br:/etc/local/nginx/sites-available/www - Destinarátio: e.g
~/Desktop/Arquivos Copiados/www
- Remetente: e.g
-
ln -s {diretório/arquivo} {nome_final}- Criar arquivo/diretório simbólico. Você pode criar uma pasta com todo o conteúdo da outra pasta (Ponteiro). -
htop- Monitorar CPU, Ram e Disco pelo terminal, com visual clean. Necessário instalar pacote -
mcedit- Você navega e edita arquivos pelo terminal, porém com uma tela intuitiva. necessário instalar pacote -
sh- Versão mais antiga do shell GNU. -
bash- Versão mais recente do shell GNU.
Em desenvolvimento.
- Este guia não é certificado por nenhuma instituição, portanto, é feito com base no meu conhecimento e experiências como Desenvolvedor Web.
- É de total liberdade do leitor, aproveitar o conteúdo para agregar no conhecimento.
- Não me responsabilizo desentendimentos de conteúdos, mas posso ajudar caso tenha alguma dúvida sobre os itens listados.
- Este guia é somente para me organizar, lembrar e me basear de conteúdos que considero importantes para o conhecimento de qualquer Desenvolvedor.
- Caso alguma coisa esteja errada, você pode me contatar por e-mail ou deixar um comentário. Difamação de Imagem é Crime [Código Penal - Art. 139]
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment