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 Provavelmente usa

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, os d oi

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