👋 Introdução Neste post vamos desenvolver uma página web para demonstrar, na prática, a integração de Mapas em uma aplicação com React usando Leaflet . Alguns pontos que vamos abordar: Geolocalização; Consumo de API; Input com Autocomplete usando React-Select; Integração com Mapas; Estilização do Mapa e Marcadores. Leaflet é uma biblioteca JavaScript open-source para trabalhar com Mapas em aplicações web e mobile. Pode ser simplesmente integrada a um site usando apenas HTML, CSS e JavaScript. Podemos também integrar a Leaflet ao React com a biblioteca React Leaflet , que tem suporte ao TypeScript sendo bastante simples de utilizar. Ambas serão utilizadas em nossa aplicação de demonstração. Somando todas essas tecnologias e conceitos, no final deste post vamos ter desenvolvido o app Entregas. Vai ser assim: Fluxo da aplicação Entregas - Clique em HD para melhorar a qualidade do Gif. Conforme podemos observar na animação acima, quando o usuário digita o endereço,...
Umas das funcionalidades que está na moda em Blogs e Sites é o Dark Mode. Devs, em sua maioria, curtem bastante utilizar temas escuros, tanto na IDE quanto em outros apps. 👋 Introdução Vamos mostrar como adicionar Dark Mode no Blog de maneira rápida e fácil, sem depender do JavaScript, usando apenas o CSS. Vou trazer um conceito — uma ideia — que vai além de mudar o background do fundo da tela e as cores dos textos, que é o padrão. Vamos escurecer um pouco as imagens também. O usuário quer ler um conteúdo com tema escuro, então a imagem do conteúdo precisa se adequar e ter menos brilho. 🖥️ Navegadores modernos Na verdade teremos uma única dependência: o Navegador ( browser ). Os navegadores modernos trazem a opção de configurar a aparência para dark 🌑 light 🌕 ou seguir as preferências já definidas no tema que o usuário escolheu no Sistema Operacional. 🌗 Configurando a aparência do Navegador Brave para Dark Theme 🍥 CSS @Media Screen ...
Introdução Vamos mostrar na prática como obter o progresso de cada requisição HTTP sendo feita através do método POST , do front end para o back end utilizando o Axios . Caso de uso Imagine que você tem um app front end que faz upload de arquivos para um servidor . Você quer acompanhar e mostrar ao usuário o progresso do envio desses arquivos , como no exemplo abaixo: Isso é possível e fácil de implementar utilizando o Axios . Vamos como codar essa funcionalidade. Mensurando o Progresso de Upload na Prática Sintaxe básica: // Utilizando axios import axios from axios ; // Criando um FormData que armazena a imagem (arquivo) const data = new FormData ( ) ; data . append ( "file" , file , filename ) ; // Fazendo a requisição para o servidor com método POST // Enviando o arquivo que está na variável data // Passando um objeto de configuração que possui um método onUploadProgress ...
Comentários
Postar um comentário