navegadores

Atalhos do Google Chrome que você precisa conhecer

O Google Chrome lidera como o navegador mais usado do mundo. Se você utiliza esse navegador, saiba que existe uma série de atalhos para que você acesse as funcionalidades de forma mais rápida, ao invés de acessar menus de ferramentas ou de ações por meio do mouse.

Geralmente os usuários conhecem os principais atalhos para ter mais velocidade em suas tarefas. Mas que tal aprender alguns novos?

Vamos lá!

React - Tópicos Avançados
Curso de React - Tópicos Avançados
CONHEÇA O CURSO

Reabrir abas fechadas

Utilizando o atalho Ctrl + Shift – T, você pode reabrir as abas fechadas recentemente. O Chrome lembra as últimas 10 abas que você fechou.

Abrir guia específica

Quando você tem diversas abas abertas, você pode ir até a guia desejada com o atalho Ctrl + número da guia (1 até 9). Por exemplo, o atalho Ctrl + 5 irá para a quinta aba da esquerda.

Ir para a aba seguinte ou anterior

Se você quiser ir para a aba seguinte da que você está, é só utilizar o comando Ctrl + Tab. Já para ir à aba anterior, o atalho é Ctrl + Shift + Tab.

Fechar aba

Você pode utilizar Ctrl + F4 para fechar uma aba. Imagine que você tenha muitas abas abertas, você não precisará ir até com o mouse na aba e procurar o pequeno “x”.

Ir para uma janela anônima

Se você precisa navegar sem deixar rastros você pode utilizar uma janela anônima, através do atalho Ctrl + Shift + N.

Complementar endereços

Para acrescentar “www” e “.com” ao endereço digitado, é só utilizar o Ctrl + Enter.

Adicionar página aos favoritos

Para adicionar a página atual nos seus favoritos, basta utilizar o atalho Ctrl + D. Já se quiser adicionar todas as abas abertas, Ctrl + Shift + D.

Abrir pasta de downloads

Com o Ctrl + J você abre uma aba contendo todos seus downloads.

Abrir o histórico

Para abrir o histórico de suas navegações é só utilizar o atalho Ctrl + H.

Gerenciador de tarefas

No gerenciador de tarefas do navegador você pode ver alguns dados, como por exemplo, quanto cada página está ocupando de memória. Basta utilizar o atalho Shift + Esc.

Selecionar endereço da página

É só utilizar o atalho Ctrl + L, que você já seleciona facilmente o endereço da página que você está.

Buscar um termo na página

Muitas vezes precisamos localizar algum nome em uma lista ou uma palavra específica em um grande texto. Com o atalho Ctrl + F é aberta uma caixa de texto para você digitar o que procura, se houver na página ele aparecerá para você selecionado.

Ver código-fonte da página

Se você é desenvolvedor provavelmente já precisou ver o código-fonte de alguma página. Para isso basta estar na página que deseja e utilizar o atalho Ctrl + U.

Aumentar e diminui texto

Se quiser aumentar o texto em uma página: Ctrl + “+”. Se deseja dimimuir: Ctrl + “-“. Se por acaso você tenha aumentado ou diminuido muito o texto e quer voltar para o tamanho padrão, só utilizar o Ctrl + 0 (zero).

Se precisar de mais alguma ajuda, você pode pedir ao próprio navegador pelo atalho F1.

Concluindo

Decorar todos de uma vez só é difícil, mas você pode ir praticando com os que mais tem utilidade para você. Assim daqui a pouco já vai ter decorado tudo sem perceber. =)

Até a próxima!

Angular - Introdução
Curso de Angular - Introdução
CONHEÇA O CURSO

Novidades do Chrome 63 para os desenvolvedores

Olá, Web Developers!

Veremos algumas novidades do Chrome 63, última versão do navegador a ser lançada em 2017.

Importação de módulos JavaScript dinâmicamente

Já faz um tempo que o JavaScript possui um modo nativo de importação de módulos, mas não faz tanto tempo que os navegadores começaram a dar suporte a essa funcionalidade.

O problema é que até pouco tempo, essa habilidade era estática.

Agora, com as mudanças no Chrome 63, podemos importar módulos em tempo de execução baseados em condições. Isso significa que, caso o usuário não precise do módulo, podemos evitar o seu carregamento.

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  });
});

No exemplo acima, o módulo só será carregado caso o usuário clique em um botão. Isso facilita aplicar a estratégia de Lazy Loading, melhorando a performance do carregamento da sua aplicação. Apenas o necessário será carregado no início e o resto será chamado apenas se for preciso.

Google Chrome Developer Tools
Curso de Google Chrome Developer Tools
CONHEÇA O CURSO

Sobrescrita do comportamento do overflow scroll com CSS

Em dispositivos móveis podemos usar o scroll para recarregar a página, como mostrado na imagem abaixo:

Recarregamento Mobile

Mas esta funcionalidade faz a página inteira ser recarregada, o que muitas vezes não é necessário. Agora é possível sobreescrever esse comportamento para criar uma funcionalidade igual a de certos aplicativos, onde fazemos o scroll apenas para carregar mais conteúdo (ou atualizar apenas uma parte da página). É o que a PWA (Progressive Web App) do Twitter está fazendo atualmente. Ao invés de recarregar a página, ele adiciona novos tweets à página.

Para isso nós usamos a propriedade CSS overscroll-behavior.

Na imagem abaixo, evitamos o recarrgamento total da página para implementar nosso próprio reload. Neste exemplo, ao invés de recarregar toda a página, apenas atualizaríamos a lista de emails.

Recarregamento Mobile Customizado

Mudança na interface de permissões

Mais de 90% de todas as requisições de permissões são ignoradas ou temporariamente bloqueadas.

É muito ruim para a experiência do usuário quando um site já pede permissões de notificação assim que você entra, sem contexto nenhum. Para diminuir isso, o Chrome 59 começou a bloquear temporariamente uma permissão caso o usuário a negasse três vezes.

Agora o Chrome 63 para Android fará requisições em modais. Isso chamará mais a atenção do usuário, mas eles já aconselham para que os desenvolvedores exibam as requisições apenas em momentos que fazem sentido. Acredita-se que assim os usuários estarão 2,5x mais dispostos a aceitar uma permissão.

Device Memory API

A nova API JavaScript Device Memory nos ajuda a entender melhor o que está limitando a performance da sua página dando dicas sobre o total de memória RAM disponível no dispositivo do usuário.

Com isso, podemos adaptar algumas funcionalidades em tempo de execução para melhorar a experiência do usuário, assim como o YouTube altera a qualidade dos vídeos dependendo da velocidade da sua conexão.

Intl.PluralRules API

Essa API nos permite criar aplicações que entendem como aplicar regras de plural das palavras em diversas línguas dependendo do número aplicado. Essa API também pode ajudar com números ordinais.

Google Chrome Developer Tools
Curso de Google Chrome Developer Tools
CONHEÇA O CURSO

© 2004 - 2019 TreinaWeb Tecnologia LTDA - CNPJ: 06.156.637/0001-58 Av. Paulista, 1765, Conj 71 e 72 - Bela Vista - São Paulo - SP - 01311-200