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

Angular - Como Acessar Variável Do Componente Filho No Componente Pai

Compartilhar variáveis entre componentes é uma atividade que frequentemente realizamos, principalmente quando desenvolvemos componentes com o intuito de serem reaproveitados por toda a aplicação.

Em uma primeira publicação, mostrei como podemos fazer o compartilhamento de variáveis do componente pai para o componente filho.

Mas e em um cenário ao contrário? Seria possível?
A resposta é SIM!

Ler mais

Como Adicionar Reticências Com Múltiplas Linhas CSS

Você está desenvolvendo uma aplicação web onde em determinado local, você precisa mostrar a descrição de um produto.
Essa descrição pode ser um texto enorme, mais de 10 linhas ou pode ser um texto pequeno, contendo apenas duas linhas.
Então, o UX designer determina que a descrição deve conter apenas 3 linhas, caso ultrapasse isso, deve-se acrescentar reticências (…)

Como podemos adicionar reticências em múltiplas linhas, com CSS?
Vamos usar uma propriedade chamada -webkit-line-clamp! Bora ver como funciona?

Ler mais