Como Criar Query Manual Com Nodejs Postgres

Enquanto desenvolvemos aplicações com NodeJS e Postgres, é comum usarmos ORM para facilitar o nosso desenvolvimento, como por exemplo, Sequelize.
O Sequelize nos fornece uma forma rápida e fácil de consultarmos dados em nosso banco, sem muitas preocupações!
Mas como fazemos, quando a consulta que o Sequelize está fazendo é muito complexa ou é inviável fazer por ele?

Podemos fazer nossas próprias consultas! Para isso usaremos um cara chamado Node-Postgres

Ler mais

Criando Uma Máscara Em Input ReactJS

Enquanto estamos desenvolvendo formulários em nossas aplicações, nos deparamos com campos comuns do tipo CEP, CPF, RG, telefone, etc.
Esses campos possuem uma formatação padrão entre eles, por exemplo, o CEP sabemos que o formato é algo assim:

1
xxxxx-xxx

Então, como podemos adicionar essa formatação automaticamente dentro do nosso sistema?
Para ser mais rápido, utilizaremos um cara chamado react-input-mask

Ler mais

Enviando Parâmetros Através Do History Push - ReactJS

Enquanto estamos desenvolvendo aplicações com React, é comum usarmos o react-router-dom para navegação entre rotas.
Ele serve para quando necessitamos mudar de página, seja renderizado a nova página sem recarregar toda nossa aplicação!
Um dos benefícios que podemos extrair dessa lib é a capacidade de enviar dados através rotas para que o nosso outro componente tenha acesso!

Você já precisou passar parâmetros com o history.push?

Ler mais

Importar E Exportar Extensões Do VSCode

Uma das maiores vantagens de usarmos editores de textos como o VSCode é sua vasta quantidade de extensões que podemos utilizar.
Temos das mais diversas, desde temas até extensões que nos ajudam a implementar nosso código!
Só que todos esses auxiliares ficam salvos localmente, ou seja, se baixarmos o VS em outro computador, não teremos nada instalado!

Foi pensando nesse problema que criaram a extensão Settings Sync
E usar ela é muito simples, basta você ter uma conta no Github e pronto!

Ler mais

Convertendo Imagem Para Base64 E Exibindo No Front-End

Recentemente me deparei com uma situação onde devia exibir a foto que estava sendo enviada pelo usuário através do input file do HTML, isto é, assim que ele carregasse a foto pelo seletor de arquivos, devia exibir como uma prévia.

Nesta aplicação, estava usando React com Hooks mas essa mesma solução pode ser aplicada com Javascript puro!

Então veja como podemos visualizar a imagem que está sendo enviada, na nossa página HTML

Ler mais

Entendendo O Context API - ReactJS

Segundo a documentação do React, Context provê uma forma de passar dados através da árvore de componentes sem a necessidade de passar esses dados através das props por cada nível desejado.

O que isto significa? Significa que usando o context, você tem um ponto focal de acesso a informação. Se você quiser acessar determinada informação, basta apontar diretamente para o context!

Com ele, conseguimos facilitar em muito nosso desenvolvimento!

Ler mais

Como Criar Projeto Angular Com Scss

Quando desenvolvemos aplicações utilizando o Angular 2 ou superior, é comum usarmos seu cli para criarmos o projeto, componentes, etc
A geração de novos projetos pode ser feita através do comando ng new minha-app.
Mas você sabia que podemos passar alguns parâmetros junto a este comando para que o projeto já venha com algumas configurações definidas?
Um exemplo disso é a criação do projeto já utilizando o Scss!

Ler mais