Postagens

Criando Badges

Imagem
  Não é difícil ver projetos e perfis pela internet que usam badges, realmente elas nos dão um visual mais atrativo e destaque a tecnologias que usamos ou nossas redes sociais por exemplo. Neste artigo vou ensinar a fazer badges estáticas simples, usando apenas uma URL. Mãos a obra! Entendendo a URL Vamos usar o link abaixo como exemplo: https://img.shields.io/badge/YouTube-%23FF0000.svg?style=for-the-badge&logo=YouTube&logoColor=white O link gera esta badge: Vamos analisar esta URL mais de perto URL Texto - Cor Fundo Formato Imagem https://img.shields.io/badge/ YouTube - %23FF0000 .svg? Estilo & - Ícone - ...

Microsserviços

Imagem
Neste artigo decidi escrever um pouco sobre microsserviços, esse conhecimento é importante no desenvolvimento web e bem solicitado em diversas vagas de emprego. Saber o básico sobre microsserviços pode ser de grande ajuda. Como a web funciona? Para saber como funcionam os microsserviços, precisamos antes entender como a web funciona. É muito importante entender o protocolo HTTP, em resumo o cliente (celular, computador, tablet) faz um acesso, por exemplo digitamos no navegador um endereço de um site. Desta forma o cliente faz uma requisição ao servidor. O servidor processa o pedido e fornece uma resposta, que muitas vezes pode ser, exibir o conteúdo do site ou solicitar um login. Protocolo HTTP Aplicações Monolíticas Um aplicativo monolítico tem todas ou a maioria das funcionalidades em um único processo, além dividir os componentes em camadas ou bibliotecas internas. Desvantagens:   Demora para fazer o deploy. Uma falha pode danificar ou até derrubar o sistema Provavel...

CSS Flex box e Grid - Saiba de uma vez por todas, como alinhar e posicionar elementos no HTML.

Imagem
CSS - Flex-Box e Grid Se você é aquela pessoa que quando precisa alinhar itens no HTML, fica fazendo tentativas no CSS até dar certo. Este artigo é para você. No CSS o flex-box torna os itens flexíveis para que possamos alinha-los e posicioná-los da forma que desejarmos. O GRID transforma um conjunto de itens da nossa página em uma tabela, onde cada item pode ser posicionado em determinada linha e coluna. Temos um desafio para você. Aprender na prática é sempre melhor, no final deste artigo temos um desafio. Que tal alinhar os produtos de uma loja virtual usando "flex-box" e "grid"? Continue lendo e no fim baixe os arquivos do desafio!

EsLint no Visual Studio Code - Tutorial Rápido!

Imagem
  Para que serve? O EsLint é uma ferramenta que nos ajuda a automatizar a padronização do nosso código. Com ele criamos regras, encontramos códigos fora do padrão e conseguimos corrigir tudo de forma rápida. Por que usar?   É importante seguir o mesmo padrão de código durante o projeto, muitas vezes não trabalhamos sozinhos, o que acaba variando ainda mais os estilos de código. O EsLint acaba com esse problema, pois todos vão manter o mesmo padrão e regras. Instalando   Acesse a pasta raiz do seu projeto, ou crie um novo projeto usando o comando npm init -y Agora que temos o arquivo " pakage.json "  na pasta raiz do nosso projeto. Podemos fazer a instalação do EsLint como desenvolvimento, desta forma quando nosso projeto for para produção os arquivos do EsLint não precisam ir com ele. npm eslint --save-dev Configurando Para iniciar a configuração do EsLint precisamos estar na pasta raiz do projeto. Vamos usar um dos comandos abaixo...

Testes unitários com Jest no Node.JS

Imagem
Uma parte importante do nosso trabalho como desenvolvedor é fazer testes. Durante a construção do nosso código mesmo sem perceber fazemos testes o tempo todo. O grande problema é que quando nosso código vai se tornando grande, com vários arquivos  e funções, fica mais difícil testar tudo. Muitas vezes um código que estamos fazendo, pode causar um erro em uma outra parte do código que fizemos antes. A solução é automatizar nossos testes, podemos fazer isso por meio de um framework. Hoje vou te ensinar a como usar o Jest para fazer seus testes. A configuração do Jest é fácil e vai fazer você ganhar tempo, em segundos toda sua aplicação será testada. Instalando o Jest Antes de começar quero lembrar que todos os arquivos deste tutorial, estão disponíveis para download no fim do artigo Vou iniciar um projeto novo, com o código: npm init -y Com o arquivo " pakage.json " criado vamos a instalação do Jest como dependência. npm install jest –save-dev Compati...