Trabalhando com a propriedade CSS currentColor

Nesse post vamos falar sobre CSS currentColor, ele já está aí a um bom tempo e ela pode ser bem útil para melhorar o nosso código CSS e nesse tutorial vamos ver como. Muitas vezes queremos fazer uma referência a cor atual do nosso elemento, algo como a palavra-chave this, comum nas linguagens de programação.… Continuar lendo Trabalhando com a propriedade CSS currentColor

Trabalhando com Fetch API e XMLHttpRequest

Nesse post vamos trabalhar com duas opções para realizar requisições Assíncrona a dados no servidor XMLHttpRequest e Fetch API. Com a popularização do jQuery por muito tempo utilizamos a biblioteca para fazer requisições AJAX pela facilidade, melhorias com recursos extras e o suporte aos browsers antigos.

Introdução a imagens responsivas com srcset

Imagens são responsáveis pela maior parte do carregamento de bytes de uma aplicação web em geral. Não podemos evitar-las, pois imagens são um ponto crucial da nossa aplicação. Mas temos alternativas para reduzir esse impacto com imagens responsivas. O que são imagens responsivas? Imagine o seguinte cenário, no seu website você possui uma imagem de… Continuar lendo Introdução a imagens responsivas com srcset

localStorage: Armazenando dados com JavaScript

Esse post é um dos posts mais visualizados do blog, foi criado em 2013, mas vou dar uma atualizada no que aconteceu de lá para cá. Armazenamento local com localStorage é umas das features mais úteis do HTML5 podemos utilizar para uma infinidade de ações agora com Progressive Web Apps esse recurso voltou a ficar… Continuar lendo localStorage: Armazenando dados com JavaScript

Observe a orientação do device com JavaScript

Com JavaScript podemos observar a orientação do device, também é possível realizar este tratamento com CSS, mas isso fica restrito a questões visuais, caso queria realizar algum tratamento lógico na nossa aplicação podemos utilizar JavaScript. Como acompanhar a orientação do device com javascript? Temos “N” possibilidades de acompanhar a orientação do device com JavaScript, nesse… Continuar lendo Observe a orientação do device com JavaScript

Limites do LocalStorage

Sempre quando falo de localStorage as pessoas me perguntam: “Qual o limite do LocalStorage?” sempre respondia o valor padrão de 5MB, mas esse valor é apenas uma especificação da W3C. Segundo ela: A mostly arbitrary limit of five megabytes per origin is suggested. Implementation feedback is welcome and will be used to update this suggestion… Continuar lendo Limites do LocalStorage

Crie accordion sem javascript

  <details> é uma tag que podemos encapsular de desencapsular um determinado conteúdo, para obter informações adicionais sobre uma determinada informação, resumindo um accordion. Para trabalhar com esse recurso além da elemento <details>, precisamos do elemento <summary>, ele deve ser incluso como filho do <details>. Com este elemento conseguimos prover uma legenda ou um capítulo para… Continuar lendo Crie accordion sem javascript

Chame o card de SMS ou o card de discagem com um simples link

Você sabia que é possível preparar um envio de uma SMS via tag <a>. Isso é um recurso bem antigo(início de 2010) dos primórdios do HTML Mobile e podemos usar este recurso bem útil e otimizar a experiência do usuário, imagine uma listagem de lojas o usuário deseja ligar para uma loja específica, se não… Continuar lendo Chame o card de SMS ou o card de discagem com um simples link

Use o Input type apropriado para cada tipo de dado

Com o HTML5 foram introduzidos os novos inputs types isso representou um ganho enorme para os usuários mobile que utilizam formulários em seu app e site, utilizar o input type correto é muito importante para experiência do usuário. Nesse tutorial vou listar os principais inputs type para você utilizar em sua aplicação. date Este campo… Continuar lendo Use o Input type apropriado para cada tipo de dado

Trabalhando cards com Webworks

Os cards permitem abrir em seu app recursos de outras aplicações, normalmente o card fornece uma capacidade de executar tarefas específicas, por exemplo, o acesso a câmera ou acesso a agenda para selecionar um contato, tudo isso de forma bem simples uma tela sobrepõe o app, uma ação específica é executada em seguida o card… Continuar lendo Trabalhando cards com Webworks