Matérias
Criar chatbots locais e com capacidade off-line
Publicado em 13 de janeiro de 2024 Há muitos projetos incríveis que você pode criar com IA, com modelos de machine learning clássicos e modelos de linguagem grandes (LLMs) mais recentes. Com LLMs, os computadores podem gerar novos conteúdos, escrever
Crie um chatbot local e off-line com o WebLLM
Publicado em 13 de janeiro de 2024 Esta é a segunda parte de uma série de três partes sobre LLMs e chatbots. O artigo anterior discutiu os benefícios e as desvantagens dos LLMs no dispositivo e no navegador. Agora que você entende melhor a IA do lado
Benefícios e limites dos modelos de linguagem grandes
Publicado em 13 de janeiro de 2024 Este é o primeiro de uma série de três artigos sobre LLMs e chatbots. A parte 2 sobre como criar um chatbot com o WebLLM e a parte 3 sobre como usar a API Prompt já estão disponíveis. Os modelos de linguagem grandes
Criar um chatbot local e off-line com a API Prompt
Publicado em 13 de janeiro de 2024 Este é o último artigo de uma série de três partes sobre chatbots LLM. Os artigos anteriores discutiram o poder dos LLMs do lado do cliente e mostraram como adicionar um chatbot com tecnologia de WebLLM a um
Otimizar tarefas longas
Você recebeu a instrução de "não bloquear a linha de execução principal" e "dividir suas tarefas longas", mas o que significa fazer isso?
Aplicar efeitos a imagens com a propriedade mask-image do CSS
A máscara de CSS oferece a opção de usar uma imagem como camada de máscara. Isso significa que você pode usar uma imagem, um SVG ou um gradiente como máscara para criar efeitos interessantes sem um editor de imagens.
Valor de referência de 2024: mais ferramentas para ajudar desenvolvedores da Web
conjunto de dados de recursos da Web, painel de status da plataforma da Web, widget de status de referência e muito mais. Relembre o valor de referência de 2024.
Vídeo de carregamento lento
Esta postagem explica o carregamento lento e as opções disponíveis para vídeos.
Pré-carregar módulos
O pré-carregamento do módulo oferece uma maneira de carregar de forma declarativa módulos JavaScript com antecedência.
Medir o preenchimento automático do navegador nos formulários
Para otimizar a experiência do usuário, é essencial entender como ele interage com seus formulários. O preenchimento automático do navegador desempenha um papel importante nesse processo. Saiba como coletar e analisar dados sobre como os usuários usam o preenchimento automático nos seus formulários.
Parte 2: criar a detecção de toxicidade da IA do lado do cliente
A detecção de toxicidade protege seus usuários e cria um ambiente on-line mais seguro. Na segunda parte, vamos aprender a criar uma ferramenta de IA do lado do cliente para detectar e reduzir a toxicidade na origem.
Parte 1: IA do lado do cliente para combater a toxicidade on-line
"Proteja seus usuários e crie um ambiente on-line mais seguro com a detecção de toxicidade. Na primeira parte, compartilhamos o contexto necessário para implantar a IA e reduzir a toxicidade na fonte: os teclados dos usuários."
Tempo total de bloqueio (TBT)
Esta postagem descreve a métrica "Tempo total de bloqueio" (TBT, na sigla em inglês) e explica como medi-la.
Web Vitals
Métricas essenciais para um site íntegro
Otimizar a Maior exibição de conteúdo
Um guia explicativo sobre como detalhar a LCP e identificar as principais áreas de melhoria.
As maneiras mais eficazes de melhorar as Core Web Vitals
Uma coleção de práticas recomendadas que o Chrome identificou como as maiores oportunidades para otimizar o desempenho da Web e melhorar as Core Web Vitals
Começar a medir as Web Vitals
Saiba como medir as Core Web Vitals do seu site em ambientes reais e de laboratório.
A propriedade content-visibility do CSS agora está disponível como padrão
A propriedade content-visibility do CSS agora está disponível como padrão.
Comparar o recurso de LLM com o resumo
Avalie os resultados de diferentes modelos e comandos usando o LLM como uma técnica de julgamento. Em vez de depender do julgamento humano, a validação do modelo é delegada a outro LLM.
Como os limites das Core Web Vitals foram definidos
A pesquisa e a metodologia por trás dos limites das Principais métricas da Web
Diagnosticar manualmente as interações lentas no laboratório
Você analisou os dados de campo e notou algumas interações lentas. A próxima etapa é aprender mais sobre como testar manualmente essas interações e identificar as causas por trás delas.
Fluxos de trabalho das Principais métricas da Web com ferramentas do Google
Com a crescente importância das Core Web Vitals, os proprietários e desenvolvedores de sites se concentram cada vez mais no desempenho e nas principais experiências do usuário. O Google oferece muitas ferramentas para ajudar a avaliar, otimizar e monitorar páginas, mas os usuários muitas vezes ficam confusos com as diferentes fontes de dados e como usá-las de maneira eficaz. Este guia propõe um fluxo de trabalho que combina várias ferramentas e esclarece onde e como elas fazem sentido ao longo do processo de desenvolvimento.
Referência
Este artigo explica a origem do Baseline, o envolvimento do Google e a propriedade do WebDX Community Group.
Cache de avanço e retorno
Saiba como otimizar suas páginas para carregamentos instantâneos ao usar os botões "Voltar" e "Avançar" do navegador.
O aninhamento de CSS foi aprimorado com CSSNestedDeclarations.
O aninhamento de CSS está ficando muito melhor.
First Input Delay (FID)
Esta postagem apresenta a métrica de latência na primeira entrada (FID, na sigla em inglês) e explica como medi-la
Depurar o desempenho no campo
Saiba como atribuir seus dados de desempenho com informações de depuração para ajudar a identificar e corrigir problemas de usuários reais com o Analytics
Melhore a performance e a UX da IA do lado do cliente
Descubra os benefícios da IA do lado do cliente, incluindo baixa latência, redução de custos do lado do servidor, sem requisitos de chave de API, maior privacidade do usuário e acesso off-line.
Comparativo de mercado da performance da @property do CSS
Qual é o impacto de @property na performance do seu CSS?
Correlação das Core Web Vitals e receita de publicidade com as ferramentas do Google
Saiba como usar as ferramentas do Google para correlacionar suas Core Web Vitals com a receita de publicidade.
É hora de carregar lentamente iframes fora da tela.
Esta postagem aborda o atributo de carregamento e como usá-lo para controlar o carregamento de iframes.
Armazenamento para a Web
Há muitas opções diferentes para armazenar dados no navegador. Qual é a melhor para suas necessidades?
O protocolo de push na Web
Um tutorial interativo passo a passo que mostra como criar um servidor que gerencia assinaturas de notificações push e envia solicitações de protocolo push da Web para um serviço de push.
Como criar vários Progressive Web Apps no mesmo domínio
Conheça as maneiras recomendadas e não recomendadas de criar vários PWAs reutilizando o mesmo domínio, com as respectivas vantagens e desvantagens.
Como o Chrome lida com as atualizações no manifesto do app da Web
O que é necessário para alterar ícones, atalhos, cores e outros metadados no manifesto do seu app da Web para seu PWA.
O que é necessário para a instalação?
Critérios de instalação de Progressive Web App.
Quais são as características de um bom Progressive Web App?
O que torna um Progressive Web App bom ou excelente?
Adicionar um manifesto de app da Web
O manifesto do app da Web é um arquivo JSON simples que informa ao navegador como seu app da Web deve se comportar.
Reduza o scripting em vários locais (XSS) com uma Política de Segurança de Conteúdo (CSP) rígida
Saiba como implantar uma CSP com base em valores de uso único ou hashes de script como uma defesa aprofundada contra scripting em vários locais.
Como acessar dispositivos de hardware na web
Este artigo ajuda os desenvolvedores da Web a escolher a API de hardware correta com base em um determinado dispositivo.
Permitir a reutilização da chave de acesso nos seus sites com solicitações de origem relacionadas
Saiba como usar as solicitações de origem relacionadas para permitir a reutilização de chaves de acesso nos seus sites.
Carregamento lento de imagens no navegador para a Web
Esta postagem aborda o atributo de carregamento e como ele pode ser usado para controlar o carregamento de imagens.
Escolha o formato de imagem correto
Escolher o formato certo é a primeira etapa para mostrar imagens otimizadas no seu site. Esta postagem vai ajudar você a fazer a escolha certa.
Métricas personalizadas
Com as métricas personalizadas, você pode avaliar e otimizar aspectos da experiência exclusivos do seu site.
Meça e depure a performance com o Google Analytics 4 e o BigQuery
Saiba como enviar dados das Métricas da Web para as propriedades do Google Analytics 4 e exportar os dados para análise no BigQuery e no Looker Studio.
Práticas recomendadas de permissões da Web
Neste guia, descrevemos as práticas recomendadas que os sites precisam seguir ao pedir permissão aos usuários para acessar recursos sensíveis (como câmera, microfone e localização) para minimizar solicitações desnecessárias e bloquear o acesso.
Práticas recomendadas para avisos de cookies
Saiba mais sobre como as notificações de cookies afetam o desempenho, a medição do desempenho e a UX.
Personalize notificações de mídia e controles de mídia com a API Media Session
Os desenvolvedores da Web podem personalizar as notificações de mídia e responder a eventos relacionados à mídia, como buscas ou mudanças de faixas, usando a API Media Session.
Encontrar interações lentas no campo
Antes de reproduzir interações lentas no laboratório para otimizar a interação do seu site com a próxima exibição, você precisa usar dados de campo para encontrá-los. Saiba como fazer isso neste guia.
Como usar o tabindex
Use o atributo tabindex para definir explicitamente a posição da guia de um elemento.
Tempo até o primeiro byte (TTFB)
Esta postagem apresenta a métrica "Tempo até o primeiro byte" (TTFB, na sigla em inglês) e explica como medi-la.
Engenharia de comandos prática para LLMs menores
Saiba como ajustar seus comandos para alcançar seus resultados preferidos em diferentes LLMs, modelos e tamanhos de modelo.
Interação com Próxima Exibição (INP)
Esta postagem apresenta a métrica Interação com a próxima exibição (INP, na sigla em inglês) e explica como ela funciona, como medi-la e oferece sugestões para melhorá-la.
Cores dependentes do esquema de cores CSS com light-dark()
description: defina cores que reagem ao esquema de cores usado com a função light-dark().
Padrões de desempenho do WebAssembly para apps da Web
Neste guia, voltado a desenvolvedores da Web que querem se beneficiar do WebAssembly, você vai aprender a usar o Wasm para terceirizar tarefas que consomem muita CPU com a ajuda de um exemplo em execução.
Layouts de grade animada em CSS
Na grade CSS, as propriedades "grid-template-columns" e "grid-template-rows" permitem definir nomes de linhas e acompanhar o dimensionamento de colunas e linhas da grade, respectivamente. O suporte à interpolação para essas propriedades permite que os layouts de grade façam a transição suave entre estados, em vez de se ajustar na metade de uma animação ou transição.
Curta o jogo do dinossauro do Chrome com seu gamepad
Aprenda a controlar jogos da Web com a API Gamepad.
O atributo inert
A propriedade inert é um atributo HTML global que simplifica como remover e restaurar eventos de entrada do usuário em um elemento, incluindo eventos de foco e de tecnologias adaptativas.
Ética e IA
Há inúmeras considerações éticas ao usar ferramentas de IA e gerar novos conteúdos.
O que é inteligência artificial?
A sigla AI é frequentemente usada como sinônimos para representar vários tipos de tecnologias que compõem o campo de IA.
Upgrade da pesquisa no site: respostas contextuais com a IA generativa
Há inúmeras considerações éticas ao usar ferramentas de IA e gerar novos conteúdos.
Conheça a equipe de IA do Web.dev
Conheça a equipe de redatores técnicos e a equipe de relacionamento com desenvolvedores.
Determinar o provedor da chave de acesso com o AAGUID
As partes confiáveis podem determinar de onde vem a chave de acesso examinando o AAGUID. Descubra como funciona.
Como compilar e otimizar o Wasm com Binaryen
Com o exemplo de uma linguagem de brinquedo sintética chamada ExampleScript, aprenda a escrever e otimizar módulos WebAssembly em JavaScript usando a API Binaryen.js.
Captura de áudio e vídeo em HTML5
A captura de áudio/vídeo é o "Santo Graal" do desenvolvimento da Web há muito tempo. Por muitos anos, precisamos usar plug-ins de navegador ( Flash ou Silverlight ) para fazer o trabalho. Vamos lá! HTML5 ao resgate. Talvez não seja aparente, mas o
O componente da Web <model-viewer>
O componente da Web <model-viewer> permite que você use modelos 3D em uma página da Web de maneira declarativa.
Análise detalhada de userverification
Saiba como usar "userVerification" na WebAuthn
Por que os dados do CrUX são diferentes dos meus dados do RUM?
Saiba por que os dados da RUM podem mostrar números diferentes das Principais métricas da Web em comparação com o CrUX.
Acessibilidade para desenvolvedores da Web
É importante criar sites inclusivos e acessíveis a todos. Há pelo menos seis áreas principais de deficiência que podemos otimizar: visual, auditiva, de mobilidade, cognição, fala e neural.
Largest Contentful Paint (LCP)
Esta postagem apresenta a métrica Maior exibição de conteúdo (LCP) e explica como medi-la.
Carregar JavaScript de terceiros
Os scripts de terceiros oferecem uma ampla variedade de recursos úteis, tornando a Web mais dinâmica. Saiba como otimizar o carregamento de scripts de terceiros para reduzir o impacto deles no desempenho.
Impedir a criação de uma nova chave de acesso, se já houver uma
Saiba como impedir a criação de uma nova chave de acesso caso já exista uma no gerenciador de senhas do usuário.
Trabalhar com IndexedDB
Um guia para os conceitos básicos do IndexedDB.
5 snippets de CSS que todos os desenvolvedores front-end precisam saber em 2024
CSS digno de ferramenta, eficiente e estável que você pode usar hoje.
Otimizar o tempo para o primeiro byte
Aprenda a otimizar a métrica "Tempo até o primeiro byte".
Quais são as partes de um URL?
Qual é a diferença entre um host, um site e uma origem? O que é um eTLD+1? Explicamos neste artigo.
Análise detalhada das credenciais detectáveis
Saiba o que são credenciais detectáveis e como criar experiências do usuário adequadas ao seu caso de uso.
Desempenho de renderização
Os usuários percebem se sites e aplicativos não funcionam bem. Por isso, otimizar o desempenho da renderização é crucial.
ResizeObserver: é como document.onresize para elementos.
O "ResizeObserver" notifica você quando o retângulo de conteúdo de um elemento muda de tamanho para que você possa reagir de acordo.
Otimizar a codificação e o tamanho da transferência de recursos baseados em texto
Além de eliminar downloads desnecessários de recursos, o melhor que você pode fazer para melhorar a velocidade de carregamento da página é minimizar o tamanho geral do download otimizando e compactando os recursos restantes.
OffscreenCanvas: agilize suas operações com um web worker
Este documento explica como você pode usar a API OffscreenCanvas para melhorar o desempenho ao renderizar elementos gráficos no seu app da Web.
First Contentful Paint (FCP)
Esta postagem apresenta a métrica "Primeira exibição de conteúdo" (FCP, na sigla em inglês) e explica como medi-la
Redes de fornecimento de conteúdo (CDNs)
Este artigo fornece uma visão geral abrangente das redes de fornecimento de conteúdo (CDNs). Além disso, o guia explica como escolher, configurar e otimizar uma configuração da CDN.
O que resulta em uma boa experiência de logout?
Orientações práticas para desenvolvedores sobre o que fazer quando um usuário sai do site.
Tempo para interação da página (TTI)
Esta postagem apresenta a métrica "Tempo para interação da página" (TTI, na sigla em inglês) e explica como fazer a medição dela
Otimizar o carregamento de recursos com a API Fetch Preview
A API Fetch Priority indica a prioridade relativa dos recursos para o navegador. Isso permite o carregamento ideal e melhora as Principais métricas da Web.
As pseudoclasses :user-valid e :user-invalid
Sobre as pseudoclasses :user-valid e :user-invalid e como usá-las para melhorar a experiência do usuário de validação de entrada.
Otimizar as Core Web Vitals para os tomadores de decisão de negócios
Saiba como as pessoas que tomam decisões nas empresas e não desenvolvedores podem melhorar as Principais métricas da Web.
As nuances das strings de codificação base64 no JavaScript
Entenda e evite problemas comuns ao aplicar a codificação e a decodificação em base64 a strings.
Subgrade CSS
A subgrade permite o compartilhamento de grade, permitindo que grades aninhadas sejam alinhadas a ancestrais e irmãos.
Como carregar anúncios de maneira eficaz sem afetar a velocidade da página
No mundo digital de hoje, a publicidade on-line é uma parte essencial da Web sem custo financeiro que todos nós usamos. No entanto, anúncios mal implementados podem tornar a experiência de navegação mais lenta, frustrar os usuários e diminuir o engajamento. Aprenda a carregar anúncios de maneira eficaz sem afetar a velocidade da página, garantindo uma experiência do usuário perfeita e maximizando as oportunidades de receita para proprietários de sites.
Quatro tipos comuns de cobertura de código
Saiba o que é a cobertura de código e descubra quatro maneiras comuns de medi-la.
Testar ou não: do ponto de vista técnico
Determine o que você precisa testar e o que pode descartar.
Como definir casos de teste e prioridades
Determine o que testar, defina seus casos de teste e priorize.
Métricas de performance centradas no usuário
As métricas de performance centradas no usuário são uma ferramenta essencial para entender e melhorar a experiência no seu site, beneficiando usuários reais.
Pré-carregar imagens responsivas
Saiba mais sobre possibilidades novas e empolgantes de pré-carregamento de imagens responsivas para garantir uma ótima experiência do usuário.
Como adaptar a tipografia às preferências do usuário com CSS
Um método para adaptar uma fonte às preferências dos seus usuários, para que eles fiquem o máximo possível na leitura do seu conteúdo.
Pirâmide ou caranguejo? Encontre uma estratégia de teste adequada
Descubra como combinar diferentes tipos de teste em uma estratégia razoável que corresponda ao seu projeto.
Três tipos comuns de automação de testes
Vamos começar com o básico! Exploração dos dois modos gerais de teste e três tipos comuns de automação de testes.
Eliminar downloads desnecessários
Você deve auditar seus recursos periodicamente para garantir que cada um deles esteja ajudando a oferecer uma melhor experiência ao usuário.
O que é o WebAssembly e de onde ele veio?
Uma introdução ao WebAssembly (às vezes abreviado como Wasm), ao formato de código binário portátil e ao formato de texto correspondente para programas executáveis, bem como interfaces de software para facilitar as interações entre tais programas e o ambiente de host.
Como compilar mkbitmap para WebAssembly
O programa mkbitmap C lê uma imagem e aplica uma ou mais das seguintes operações a ela, nesta ordem: inversão, filtragem de passagem alta, dimensionamento e limite. Cada operação pode ser controlada e ativada ou desativada individualmente. Este artigo mostra como compilar mkbitmap para o WebAssembly.
Hospede com segurança dados do usuário em aplicativos da Web modernos
Como exibir com segurança conteúdo controlado pelo usuário em aplicativos da Web.
O sistema de arquivos privados de origem
O padrão de sistema de arquivos apresenta um sistema de arquivos privado de origem (OPFS, na sigla em inglês) como um endpoint de armazenamento privado para a origem da página e não visível para o usuário, que oferece acesso opcional a um tipo
Como implantar o AVIF em sites mais responsivos
Uma visão geral de como o AVIF é adotado no ecossistema e os benefícios de desempenho e qualidade que os desenvolvedores podem esperar do AVIF para imagens estáticas e animações.
Otimizar a interação com a próxima exibição
Saiba como otimizar a interação do seu site com a próxima exibição.
Recursos de referência que você pode usar hoje
conhecer apenas alguns dos recursos que fazem parte do valor de referência.
Otimizar atraso de entrada
O atraso na entrada pode contribuir significativamente para a latência total de interação e afetar negativamente a INP da sua página. Neste guia, você vai aprender o que é o atraso de entrada e como reduzi-lo para uma interatividade mais rápida.
Como tamanhos grandes de DOM afetam a interatividade e o que você pode fazer a respeito
Grandes tamanhos de DOM podem ser um fator que afeta a velocidade das interações. Saiba mais sobre a relação entre o tamanho do DOM e o INP e o que fazer para reduzir o tamanho do DOM e outras formas de limitar o trabalho de renderização quando sua página tiver muitos elementos de DOM.
Avaliação de script e tarefas longas
Ao carregar scripts, o navegador leva tempo para avaliá-los antes da execução, o que pode resultar em tarefas longas. Saiba como funciona a avaliação de script e o que fazer para evitar que ela gere tarefas longas durante o carregamento da página.
Renderização de HTML e interatividade do lado do cliente
Renderizar HTML com JavaScript é diferente de renderizar HTML enviado pelo servidor e que pode afetar o desempenho. Saiba as diferenças neste guia e o que fazer para preservar o desempenho de renderização do seu site, especialmente no que diz respeito às interações.
Otimizar a Mudança de layout cumulativa
A Mudança de layout cumulativa (CLS) é uma métrica que quantifica a frequência com que os usuários veem mudanças repentinas no conteúdo da página. Neste guia, vamos abordar a otimização de causas comuns de CLS, como imagens e iframes sem dimensões ou conteúdo dinâmico.
Cumulative Layout Shift (CLS)
Esta postagem apresenta a métrica Mudança de layout cumulativa (CLS) e explica como medi-la.
Crie experiências do WordPress no navegador com o WordPress Playground e o WebAssembly
O WordPress completo com tecnologia PHP executado apenas no navegador com o WebAssembly
Nova funcionalidade para desenvolvedores oferecida pelo WebAssembly
Uma vitrine de ferramentas agora disponíveis na Web graças ao WebAssembly.
PWAs em app stores
Eles podem ser enviados para app stores, como a Android Play Store, a Microsoft Store e muito mais.
O que são os mapas de origem?
Melhorar a experiência de depuração da Web com mapas de origem.
6 snippets de CSS que todos os desenvolvedores front-end precisam conhecer em 2023
CSS digno de ferramenta, eficiente e estável que você pode usar hoje.
Funções trigonométricas no CSS
Calcule o seno, o cosseno, a tangente e muito mais no CSS.
Realizar operações eficientes por frame de vídeo em vídeo com requestVideoFrameCallback()
O método requestVideoFrameCallback() permite que autores da Web registrem um callback que é executado nas etapas de renderização quando um novo frame de vídeo é enviado ao compositor.
Destaques da comunidade do GDE: Lars Knudsen
Uma de uma série de entrevistas com membros do programa Especialistas do Google Developers (GDE).
Dica rápida de CSS! Texto em gradiente animado
Vamos criar esse efeito de texto com gradiente animado usando propriedades personalizadas com escopo e background-clip. Acesse o CodePen e crie uma nova caneta. Crie a marcação do texto. Vamos usar um cabeçalho com a palavra "Speedy": Em seguida,
Novos padrões para apps de música
Esta postagem do blog anuncia uma nova coleção de padrões para apps de mídia.
Criando o Chrometober!
Como o livro de rolagem ganhou vida por compartilhar dicas e truques divertidos e assustadores neste Chrometober.
Como criar um componente de dica
Uma visão geral básica de como criar um elemento personalizado de dica adaptável e acessível.
Fazer login com uma chave de acesso usando o preenchimento automático de formulários
As chaves de acesso tornam as contas de usuário de um site mais seguras, simples, fáceis de usar e sem senha. Este artigo discute como um login sem senha com chaves de acesso deve ser projetado, acomodando os usuários atuais com senhas.
Criar uma chave de acesso para logins sem senha
As chaves de acesso tornam as contas de usuário de um site mais seguras, simples, fáceis de usar e sem senha. Este artigo discute como permitir que os usuários criem chaves de acesso para seu site.
Como criar um componente de botão de ação flutuante (FAB)
Uma visão geral básica de como criar componentes de FAB adaptáveis a cores, responsivos e acessíveis.
Práticas recomendadas para fontes
Saiba como otimizar fontes da Web para as Principais métricas da Web.
Dica rápida de CSS! Carregador animado
Vamos criar um carregador CSS animado com propriedades personalizadas com escopo e função de tempo de animação Acesse o CodePen e crie uma nova caneta. Crie a marcação para nosso carregador. Observe o uso de propriedades personalizadas inline: Você
Destaque da comunidade do GDE: Alba Silvente Fuentes
Uma de uma série de entrevistas com membros do programa Especialistas do Google Developers (GDE).
Como testar o contraste de cores do design da Web
Uma visão geral de três ferramentas e técnicas para testar e verificar o contraste de cores acessível do seu design.
Criar a navegação principal de um site
Este tutorial descreve como criar uma navegação principal acessível em um site. Você aprenderá sobre HTML semântico, acessibilidade e como usar atributos ARIA às vezes pode ser mais prejudicial do que vantajoso.
É :modal?
Esse pseudosseletor de CSS oferece uma maneira de selecionar elementos modais.
Práticas recomendadas para tags e gerenciadores de tags
Otimize tags e gerenciadores de tags para as Core Web Vitals.
Estilo da lista de criativos
Veja algumas maneiras úteis e criativas de estilizar uma lista.
Como criar uma ilusão de grade torta
Uma análise divertida de como recriar uma ilusão de óptica com CSS.
Como a Nordhealth usa propriedades personalizadas em Web Components
os benefícios de usar propriedades personalizadas em sistemas de design e bibliotecas de componentes.
Controle mais refinado sobre transformações CSS com propriedades de transformação individuais
Aprenda a usar as propriedades CSS de translação, rotação e escalonamento individuais para abordar transformações de maneira intuitiva.
Animações de borda CSS
Várias maneiras de animar uma borda no CSS
Como a BBC está lançando o HSTS e melhorias na segurança e no desempenho.
Para melhorar a segurança e o desempenho, a BBC está lançando o HSTS no site da BBC. Descubra o que isso significa e como a HSTS pode ajudar você.
Por que os dados de laboratório e de campo podem ser diferentes e o que fazer a respeito
Saiba por que as ferramentas que monitoram as Principais métricas da Web talvez reportem diferentes números, e como interpretar essas diferenças.
Todos saem ganhando
GDE Enrique Fernandez Guerra sobre a abertura do código da ONG HelpDev dele.
O fim do Internet Explorer
O que o final do suporte ao Internet Explorer significava para os clientes e desenvolvedores da Maersk.com.
Adeus ao HTML5Rocks
Por enquanto, HTML5Rocks, foi bom conhecer você.
Receitas de cookies primários
Saiba como definir cookies primários para garantir segurança, compatibilidade entre navegadores e minimizar as chances de falha quando os cookies de terceiros forem desativados.
Sincronizar reprodução de áudio e vídeo na Web
A API de áudio da Web permite realizar corretamente a sincronização AV.
Usar gradientes cônicos para criar uma borda fria
Gradientes cônicos podem ser usados para criar alguns efeitos interessantes, como este exemplo de borda. Este CodePen criado por Adam Argyle, originalmente compartilhado neste tweet no Twitter, mostra como usar um gradiente cônico para criar uma
Escolher uma biblioteca ou um framework JavaScript
Entenda as decisões relacionadas ao uso de uma biblioteca ou framework JavaScript.
Implementar o tratamento de erros ao usar a API Fetch
Detecção de erros ao trabalhar com a API Fetch.
A diferença entre bibliotecas e frameworks JavaScript
Entenda as diferenças entre frameworks e bibliotecas no contexto de um ambiente JavaScript do lado do cliente.
Guia do desenvolvedor de front-end para o terminal
Este recurso ajuda você a navegar rapidamente pelo terminal.
Uma API para fontes da Web bonitas e rápidas
Atualização sobre a API CSS do Google Fonts: como funciona, como usá-la e como pode fornecer suas fontes da Web de forma eficiente.
GOV.UK remove o jQuery do front-end.
O GOV.UK descartou a dependência da jQuery do front-end. Você nunca vai adivinhar o que aconteceu. (Sim.)
Como criar um componente de botão
Uma visão geral básica de como criar componentes adaptáveis a cores, responsivos e acessíveis.
Não combater o scanner de pré-carregamento do navegador
Descubra o que é o verificador de pré-carregamento do navegador, como ele ajuda no desempenho e como você pode evitar problemas.
Práticas recomendadas para medir as Métricas da Web no campo
Como medir as Métricas da Web com sua ferramenta de análise atual
Minimizar a distância
Facilitando a criação para a Web.
Encontrar coragem e inspiração na comunidade de desenvolvedores
Especialistas do Google Developers na Web para saber como os programas de mentoria permitiram que eles se tornassem líderes.
Fontes variáveis na vida real
Compartilhando um guia prático de fontes variáveis, com muitos exemplos.
Crie gradientes CSS rapidamente com o CSS Gradient Creator
Esta ferramenta de Josh W Comeau simplifica muito a criação de gradientes bonitos.
Análise detalhada dos principais pontos problemáticos do desenvolvedor da Web
Uma coleção de insights sobre os principais pontos problemáticos, coletados de várias conversas individuais com desenvolvedores da Web.
Melhore a imagem do seu site com images.tooling.report
Confira o estado das ferramentas de imagem.
Escopo de variáveis globais e locais
Saiba mais sobre o escopo e como ele funciona no JavaScript.
Como criar um componente de caixa de diálogo
Uma visão geral básica de como criar mini e mega modais acessíveis, responsivos e com adaptação de cores com o elemento " ".
Depurar erros de reprodução de mídia na Web
Saiba como depurar erros de reprodução de mídia na Web.
Destaque da comunidade do GDE: Nishu Goel
Uma de uma série de entrevistas com membros do programa Especialistas do Google Developers (GDE).
Os efeitos de desempenho de muito carregamento lento
Carregar imagens com rapidez na janela de visualização inicial, enquanto o carregamento lento do restante é mais flexível, pode melhorar as Core Web Vitals ao carregar menos bytes.
Como criar um componente da barra de carregamento
Uma visão geral básica de como criar uma barra de carregamento acessível e adaptativa de cores com o elemento ``.
Salvar credenciais de formulários
Mantenha os formulários de registro e login o mais simples possível. Salve as credenciais dos formulários de login para que os usuários não precisem fazer login novamente quando retornarem. Para armazenar credenciais de usuários em formulários: Antes
Chrome e Firefox em breve para alcançar a versão principal 100
Alterações na string do user agent, as estratégias que o Chrome e o Firefox estão adotando para reduzir o impacto e como você pode ajudar.
Como criar um favicon adaptável
Uma visão geral básica sobre como criar um favicon adaptável.
Desenho em tela em Emscripten
Aprenda a renderizar gráficos 2D em uma tela na Web com o WebAssembly com o Emscripten.
Melhore a segurança e a privacidade atualizando o cache HTTP
Esquecer ou usar indevidamente o cabeçalho Cache-Control pode afetar negativamente a segurança do seu site e a privacidade dos usuários. Receba recomendações de sites importantes.
Elementos HTML adicionais
Métricas essenciais para um site íntegro
Portabilidade de aplicativos USB para a Web. Parte 2: gPhoto2
Saiba como o gPhoto2 foi transferido para o WebAssembly para controlar câmeras externas via USB de um app da Web.
Registro de erros de rede (NEL, na sigla em inglês)
Use o Network Error Logging (NEL) para coletar erros de rede no lado do cliente.
Detecção de recursos do WebAssembly
Aprenda a usar os recursos mais recentes do WebAssembly e oferecer suporte a usuários em todos os navegadores.
Portabilidade de aplicativos USB para a Web. Parte 1: libusb
Saiba como o código que interage com dispositivos externos pode ser transferido para a Web com as APIs WebAssembly e Fugu.
Como criar um componente de mudança de tema
Uma visão geral básica de como criar um componente de mudança de tema adaptável e acessível.
Como incorporar snippets de JavaScript em C++ com Emscripten
Saiba como incorporar o código JavaScript à biblioteca do WebAssembly para se comunicar com o mundo externo.
PWAs no Oculus Quest 2
O Oculus Quest 2 é um headset de realidade virtual (RV) criado pela Oculus, uma divisão da Meta. Os desenvolvedores agora podem criar e distribuir Progressive Web Apps (PWA) 2D e 3D que aproveitam o recurso multitarefa do Oculus Quest 2. Este artigo descreve a experiência e como criar, transferir por sideload e testar seu PWA no Oculus Quest 2.
Design de edifícios
Uma prévia do processo e das ferramentas usadas para criar a experiência no estilo de calendário de festas de fim de ano da Designcember.
Calculadora Designcember
É uma tentativa esqueuórfica de recriar uma calculadora solar na Web que usa o sensor de luz ambiente e o recurso de sobreposição de controles da janela.
Como fazer cópia profunda em JavaScript usando oStructuredClone
Por mais tempo, foi preciso recorrer a soluções alternativas e bibliotecas para criar uma cópia detalhada de um valor JavaScript. A plataforma agora vem com `structuredClone()`, uma função integrada para cópia profunda.
Como criar um componente de aviso
Visão geral básica de como criar um componente de aviso adaptável e acessível.
O fundo da interface
Anúncio do fundo de IU do Chrome, criado para oferecer subsídios para pessoas que trabalham com ferramentas de design, CSS e HTML.
Como criar um componente de menu de jogo 3D
Uma visão geral básica de como criar um menu de jogo em 3D responsivo, adaptável e acessível.
Tudo do anúncio na Conferência de Desenvolvedores Chrome 2021
Um resumo de todos os principais anúncios da Conferência de Desenvolvedores do Chrome 2021 com os links para você saber mais.
Fluxos de usuários do Lighthouse
Teste uma nova API Lighthouse para medir o desempenho e as práticas recomendadas em todo o fluxo de usuários.
Novidades do PageSpeed Insights
Saiba mais sobre as novidades do PageSpeed Insights para avaliar e otimizar melhor a qualidade da página e do site.
Em relação a uma métrica de suavidade da animação
Saiba como medir animações, como considerar frames de animação e a suavidade geral da página.
A jornada do Photoshop para a web
Nos últimos três anos, o Chrome tem trabalhado para capacitar aplicativos da Web que desejam expandir os limites do que é possível no navegador. Um desses aplicativos da web foi o Photoshop. A ideia de executar um software tão complexo como o Photoshop diretamente no navegador seria difícil de imaginar alguns anos atrás. No entanto, usando várias tecnologias novas da web, a Adobe agora trouxe uma versão beta pública do Photoshop para a web.
Como criar um componente de seleção múltipla
Uma visão geral básica de como criar um componente de seleção múltipla responsivo, adaptável e acessível para classificar e filtrar as experiências do usuário.
Como avaliar o desempenho de carregamento no campo com a Navigation Timing e a Resource Timing
Aprenda os conceitos básicos do uso das APIs Navigation e Resource Timing para avaliar o desempenho de carregamento no campo.
Manipulação segura do DOM com a API Sanitizer
O objetivo da nova API Sanitizer é criar um processador robusto para que strings arbitrárias sejam inseridas com segurança em uma página. Este artigo apresenta a API e explica o uso dela.
Práticas recomendadas para o uso de incorporações de terceiros
Este documento discute as práticas recomendadas de desempenho que você pode usar ao carregar incorporações de terceiros, técnicas de carregamento eficientes e a ferramenta Layout Shift Terminator, que ajuda a reduzir as mudanças de layout para incorporações populares.
Como as arquiteturas de SPA afetam as Principais métricas da Web
As respostas a perguntas comuns sobre SPAs, Principais métricas da Web e o Google planejam abordar as limitações de medição atuais.
Detalhamento do evento JavaScript
preventDefault e stopPropagation: quando usar cada um e o que exatamente cada método faz. O processamento de eventos do JavaScript geralmente é simples. Isso é especialmente verdadeiro ao lidar com uma estrutura HTML simples (relativamente plana). As
Como agrupar recursos que não são JavaScript
Saiba como importar e agrupar vários tipos de recursos do JavaScript de maneira que funcione em navegadores e bundlers.
Como criar um componente de botão de divisão
Uma visão geral básica de como criar um componente acessível do botão de divisão.
Como usar scripts de módulo CSS para importar folhas de estilo
Saiba como usar scripts de módulo CSS para importar folhas de estilo CSS usando a mesma sintaxe dos módulos JavaScript.
Cor de destaque do CSS
Use as cores da sua marca nas entradas de formulários HTML integrados com uma linha de código.
Como criar um componente de switch
Uma visão geral básica de como criar um componente de interruptor responsivo e acessível.
Cabeçalhos de dicas do cliente de recursos de mídia de preferências do usuário
Um conjunto de cabeçalhos de sugestão do cliente permite que os sites obtenham as preferências de mídia do usuário opcionalmente no momento da solicitação, permitindo que os servidores inlinem o CSS correto por motivos de desempenho. As consultas de
Como criar um componente de navegação estrutural
Uma visão geral básica de como criar um componente de navegação estrutural responsivo e acessível para que os usuários naveguem pelo seu site.
Como usar linhas de execução WebAssembly do C, C++ e Rust
Saiba como trazer aplicativos com várias linhas de execução escritos em outras linguagens para o WebAssembly.
Noções básicas de streaming de mídia
O streaming de mídia é o método de entrega contínua de conteúdo multimídia de um servidor em que o conteúdo foi dividido em blocos de dados individuais que podem ser agrupados durante a reprodução em uma ordem específica por uma solicitação de intervalo usando protocolos como DASH e HLS.
Criptografia de mídia
Aprenda sobre os conceitos de gerenciamento de direitos digitais e os comandos necessários para migrar de um arquivo mov bruto para mídia criptografada empacotada para MPEG-DASH ou HLS usando criptografia Clear Key ou Widevine.
Frameworks de mídia
Estruturas de mídia vêm na variedade reservada e de código aberto e, em sua essência, são um conjunto de APIs que suportam reprodução de áudio e/ou vídeo para vários formatos de contêiner e protocolos de transmissão.
PWA com streaming off-line
Criar um PWA com streaming off-line tem alguns desafios. Neste artigo, você aprenderá sobre as APIs e as técnicas que proporcionam aos usuários uma experiência de mídia off-line de alta qualidade.
Ajuste de tamanho do CSS para @font-face
À medida que uma fonte da Web é carregada, agora você pode ajustar a escala para normalizar o tamanho da fonte do documento e evitar mudanças de layout ao alternar entre fontes.
Como criar um esquema de cores
Uma visão geral básica de como estabelecer um esquema de cores dinâmico e configurável
Como usar o AVIF para compactar imagens no site
Veicular imagens de computador para dispositivos móveis pode usar de 2 a 4 vezes mais dados do que o necessário. Em vez de uma abordagem de tamanho único para imagens, ofereça diferentes tamanhos de imagem em dispositivos diferentes.
Evolução da Mudança de layout cumulativa nas ferramentas da Web
A partir de hoje, uma mudança na CLS foi lançada em várias plataformas de ferramentas da Web do Chrome, incluindo o Lighthouse, o PageSpeed Insights e o Chrome UX Report.
CSS para Métricas da Web
Este artigo aborda técnicas relacionadas ao CSS para otimizar as Métricas da Web.
Novos seletores funcionais de pseudoclasse CSS :is() e :where()
Essas adições aparentemente pequenas à sintaxe do seletor de CSS terão um grande impacto.
O novo treinamento do Progressive Web App já está disponível
Um novo treinamento em seis partes do Progressive Web App já está disponível, com uma nova série de codelabs para ensinar a criar PWAs confiáveis, instaláveis e eficientes.
O novo responsivo: Web design em um mundo orientado a componentes
Recursos de mídia com base em preferências do usuário, consultas de contêiner e consultas de mídia para novos tipos de tela, como telas dobráveis, vão nos permitir usar em uma nova era de Web design responsivo.
Migrar para as dicas de cliente do user agent
Estratégias para migrar seu site de depender da string de user agent para as novas dicas de cliente do user agent.
Referência rápida sobre cabeçalhos de segurança
Este artigo lista os cabeçalhos de segurança mais importantes que podem ser usados para proteger seu site. Use-o para entender os recursos de segurança baseados na Web, aprender a implementá-los no seu site e como referência para quando precisar de um lembrete.
Excalidraw e Fugu: como melhorar as principais jornadas do usuário
Documento da palestra de Thomas Steiner no Google I/O 2021 intitulada Excalidraw e Fugu: Melhorias na jornada do usuário principal
Módulos ES em service workers
Os service workers podem usar importações estáticas de módulos ES para trazer código extra, como uma alternativa a importScripts().
Como criar um componente de rolagem de mídia
Uma visão geral básica de como criar uma Scrollview horizontal responsiva para TVs, smartphones, computadores etc.
Como otimizar as Métricas da Web usando o Lighthouse
Hoje, vamos abordar novos recursos de ferramentas no Lighthouse, no PageSpeed e no DevTools para ajudar a identificar como o site pode melhorar nas métricas da Web.
Como usar APIs da Web assíncronas do WebAssembly
Saiba como invocar APIs da Web assíncronas ao compilar linguagens tradicionalmente síncronas para o WebAssembly.
Como manter scripts de terceiros sob controle
Scripts de terceiros, ou "tags" podem ser uma fonte de problemas de desempenho em seu site e, portanto, um alvo para otimização. No entanto, antes de começar a otimizar as tags adicionadas, verifique se você não está otimizando tags desnecessárias. Neste artigo, mostramos como avaliar solicitações de novas tags, além de gerenciar e revisar as atuais.
Personalize a sobreposição dos controles de janela da barra de título do PWA
Com o recurso de sobreposição de controles de janela, os desenvolvedores podem personalizar a barra de título dos PWAs instalados para que eles pareçam mais apps.
Quebra de barreiras com a API DataTransfer
O objeto DataTransfer contém dados que estão sendo arrastados durante uma operação de arrastar e soltar. Ele pode conter um ou mais itens de dados, cada um de um ou mais tipos de dados. Neste artigo, explicamos o que você pode fazer com a API DataTransfer.
Preencher formulários OTP em iframes de origem cruzada com a API WebOTP
A API WebOTP agora pode receber uma OTP de um iframe.
Como criar animações de texto dividido
Uma visão geral básica de como criar animações de letras e palavras divididas.
Evolução da métrica de CLS
Planos para melhorar a métrica de CLS e torná-la mais justa em páginas de longa duração.
Satisfação do desenvolvedor da Web
A Satisfação do desenvolvedor web é um projeto do Google para reunir informações sobre as necessidades dos desenvolvedores da web. O objetivo é uma plataforma da Web mais confiável, previsível e interoperável, permitindo que os desenvolvedores invistam e confiem nela, além de adotar e usar novos recursos para expandir a plataforma e os negócios.
Como criar um componente de configurações
Uma visão geral básica de como criar um componente de configurações de controles deslizantes e caixas de seleção.
Depurar mudanças de layout
Aprenda a identificar e corrigir mudanças de layout.
JavaScript: o que isso significa?
Descobrir o valor de "this" pode ser complicado em JavaScript, veja como fazer isso...
Como programar o mini app
Este capítulo apresenta a programação do miniapp.
Marcação, estilo, script e atualização de mini apps
Este capítulo analisa as opções de marcação, estilo, script e atualização de várias plataformas de miniapps.
Estrutura, ciclo de vida e pacotes do projeto
Este capítulo aborda a estrutura do projeto, o ciclo de vida e a criação de pacotes de miniapps.
Como aplicar os princípios de programação do miniapp a um projeto de exemplo
Este capítulo mostra um exemplo de projeto que segue a abordagem de "programação de miniapp".
Componentes de mini app
Este capítulo fornece detalhes sobre os componentes que todas as plataformas de miniapps disponibilizam.
Projetos de código aberto de mini apps
Este capítulo apresenta uma seleção de projetos interessantes de código aberto de miniapp.
O que são H5 e QuickApp?
Este capítulo fornece informações sobre apps H5 e QuickApp, que são diferentes dos miniapps.
Considerações finais sobre miniapps de um desenvolvedor da Web
Este capítulo conclui a coleção de miniapps com a observação de que pensar fora da caixa e receber informações e inspiração de fora da própria bolha pode definitivamente ajudar a construir um futuro melhor na Web.
Streams: o guia definitivo
A API Streams permite que o JavaScript acesse programaticamente fluxos de dados recebidos pela rede e os processe conforme desejado.
Como criar um componente de guias
Uma visão geral básica de como criar um componente de guias semelhante aos encontrados em apps iOS e Android.
Um guia para ativar o isolamento de origem cruzada
O isolamento de origem cruzada permite que uma página da Web use recursos avançados, como o SharedArrayBuffer. Este artigo explica como ativar o isolamento de origem cruzada no seu site.
Como solicitar o isolamento de desempenho com o cabeçalho Origin-Agent-Cluster
O cabeçalho Origin-Agent-Cluster impede o acesso síncrono a outras origens no mesmo domínio e indica ao navegador recursos dedicados para sua origem.
A propriedade aspect-ratio do CSS
Agora é mais fácil manter a proporção nas imagens e nos elementos com a nova propriedade CSS de proporção.
Práticas recomendadas para carrosséis
Saiba como otimizar carrosséis para desempenho e usabilidade.
WebRTC agora é um padrão W3C e IETF
Uma breve visão geral da história, da arquitetura, dos casos de uso e do futuro do WebRTC.
Usar HTTPS para desenvolvimento local
Na maioria das vezes, o http://localhost se comporta como HTTPS para fins de desenvolvimento. No entanto, há alguns casos especiais, como nomes de host personalizados ou o uso de cookies seguros em vários navegadores, em que você precisa configurar
Feedback necessário: o caminho para uma melhor métrica de troca de layout para páginas de longa duração
Saiba mais sobre nossos planos para melhorar a métrica "Mudança de layout cumulativa" e envie seu feedback.
Quando usar HTTPS para desenvolvimento local
O uso de http://localhost para desenvolvimento local é adequado na maioria das vezes, exceto em alguns casos especiais. Esta postagem explica quando você precisa executar o site de desenvolvimento local com HTTPS. Consulte também: Como usar o HTTPS
Codelab: como criar um componente de navegação lateral
Aprenda a criar um componente responsivo de layout de navegação lateral com deslizar.
Como criar um componente de navegação lateral
Uma visão geral básica de como criar uma navegação lateral responsiva para sair
Centralização no CSS
Siga cinco técnicas de centralização conforme eles passam por uma série de testes para ver qual é a mais resiliente a mudanças.
Codelab: Centralização no CSS
Aprenda cinco técnicas diferentes de centralização com o CSS.
Amo seu cache ❤️
O desempenho do primeiro carregamento é importante, mas não é tudo. Os usuários que carregarem o site pela segunda vez usarão o cache deles para acessar o conteúdo. Portanto, é fundamental garantir que ele funcione bem, tanto para rapidez quanto para precisão.
Worklets de pintura entre navegadores e Houdini.how
Aprenda a implementar as APIs Houdini Paint em navegadores diferentes e a explorar um mundo de worklets Houdini com o Houdini.how.
Codelab de práticas recomendadas para o formulário de endereço
Conheça as práticas recomendadas para formulários de endereço.
Codelab de práticas recomendadas para formulários de pagamento
Conheça as práticas recomendadas para formulários de pagamento.
Práticas recomendadas para formulários de OTP por SMS
Pedir ao usuário para fornecer uma OTP (senha única) enviada por SMS é uma forma comum de confirmar o número de telefone. Esta postagem apresenta as práticas recomendadas para criar um formulário de OTP por SMS com uma ótima experiência do usuário.
Como automatizar auditorias com o AutoWebPerf
Uma nova ferramenta modular que permite a coleta automática de dados de performance de várias fontes.
Práticas recomendadas para o formulário de inscrição
Ajude os usuários a se inscrever, fazer login e gerenciar os detalhes da conta com o mínimo de problemas.
Codelab de práticas recomendadas para formulários de inscrição
Use os recursos de navegador de várias plataformas para criar um formulário de inscrição simples que seja seguro, acessível e fácil de usar.
Práticas recomendadas para o formulário de pagamento e endereço
Maximize as conversões ajudando os usuários a preencher formulários de endereço e pagamento da maneira mais rápida e fácil possível.
Transmitir atualizações para páginas com os service workers
Como os service workers podem se comunicar proativamente com a página para informar sobre determinados eventos.
Guia de armazenamento em cache imperativo
Como comunicar a janela e o service worker para executar tarefas relacionadas a desempenho, armazenamento em cache e off-line.
Visão geral dos workers
Como os web workers e service workers podem melhorar o desempenho do seu site e quando usar um web worker ou um service worker.
Comunicação bidirecional com service workers
Como estabelecer um canal de comunicação bidirecional entre a página e o service worker.
Desative a aceleração do mouse para melhorar a experiência de jogo com QPS
Os apps da Web agora podem desativar a aceleração do mouse ao capturar eventos de ponteiro.
Codelab: como criar um componente de Histórias
Saiba como criar uma experiência semelhante aos Stories do Instagram na Web.
Como criar um componente de histórias
Uma visão geral básica de como criar uma experiência semelhante aos Stories do Instagram na Web.
Carregamento lento no nível do navegador para CMSs
Esta postagem fornece orientações sobre como adotar o atributo de carregamento em sistemas de gerenciamento de conteúdo.
Schemeful Same-Site
A definição de "mesmo site" está evoluindo para incluir o esquema de URL, de modo que os links entre as versões HTTP e HTTPS de um site agora contam como solicitações entre sites. Faça upgrade para HTTPS por padrão para evitar problemas sempre que possível ou continue lendo para saber detalhes sobre os valores de atributo do SameSite necessários.
Codelab: criar um servidor de notificações push
Um tutorial interativo passo a passo que mostra como criar um servidor que gerencia assinaturas de notificações push e envia solicitações de protocolo push da Web para um serviço de push.
Codelab: criar um cliente de notificação push
Um tutorial interativo passo a passo que mostra como criar um cliente que inscreve o usuário nas notificações push, exibe mensagens push como notificações e cancela a inscrição do usuário nas notificações push.
Visão geral das notificações push
Uma visão geral do que são as notificações push, por que elas podem ser usadas e como funcionam.
Medir o uso off-line
Como acompanhar o uso off-line do seu site para que você possa justificar por que ele precisa de uma experiência off-line melhor.
Exemplos de animações CSS de alto desempenho
Demonstrar como técnicas de alto desempenho podem criar animações complexas e belas.
CSS min(), max() e clamp()
Min, max e clamp oferecem recursos avançados de CSS que permitem um estilo mais responsivo com menos garantias de código. Esta postagem explica como controlar o tamanho de elementos, manter o espaçamento adequado e implementar uma tipografia fluida usando essas funções matemáticas de CSS com suporte.
Trocas assinadas (SXGs)
As SXGs são um mecanismo de entrega que possibilita autenticar a origem de um recurso independentemente de como ele foi entregue.
Melhorias no layout lógico com atalhos relativos ao fluxo
Novas abreviações de propriedades lógicas e novas propriedades de inseto para o Chromium.
Por que algumas animações estão lentas?
Animar bem é fundamental para uma ótima experiência na Web. Esta postagem explica por que alguns tipos de animação têm um desempenho melhor do que outros.
Como criar animações CSS de alto desempenho
Para melhorar o desempenho das animações CSS, use as propriedades CSS de transformação e opacidade o máximo possível e evite qualquer coisa que acione o layout ou a pintura.
Como processar solicitações de intervalo em um service worker
Verifique se o service worker sabe o que fazer quando uma resposta parcial é solicitada.
Controlar o movimento, a inclinação e o zoom da câmera
Os recursos de panorâmica, inclinação e zoom nas câmeras finalmente podem ser controlados na Web.
O que são testes de origem de terceiros?
Os testes de origem são uma maneira de testar um recurso novo ou experimental de plataforma da Web. Com um teste de origem terceirizado, os provedores de conteúdo incorporado podem testar um novo recurso em vários sites. Os testes de origem são uma
Vazamentos de memória da janela removida
As janelas removidas são um tipo comum de vazamento de memória, particularmente difícil de encontrar e corrigir.
Criar uma página substituta off-line
Aprenda a criar uma experiência off-line simples para seu app.
Crie formas de imagens interessantes com a propriedade clip-path do CSS's
O uso de recorte no CSS pode nos ajudar a fugir de todos os designs que parecem uma caixa. Usando várias formas básicas ou um SVG, é possível criar uma trajetória de corte. Em seguida, corte as partes do elemento que você não quer mostrar.
Marcadores personalizados com CSS ::marker
Use CSS para personalizar a cor, o tamanho ou o tipo de números ou marcadores nos elementos `` ou ``.
Ajude os usuários a mudar a senha com facilidade adicionando um URL conhecido para isso
Ao redirecionar as solicitações para /.well-known/change-password para o URL de mudança de senha, permite que os usuários atualizem as senhas com mais facilidade.
Como orquestrar transações de pagamento com um service worker
Depois que um app de pagamento baseado na Web é registrado, ele fica pronto para aceitar solicitações de pagamento de comerciantes. Neste artigo, ensinamos como orquestrar uma transação de pagamento de um service worker durante o tempo de execução.
Como lidar com informações de pagamento opcionais com um service worker
Depois que um app de pagamento baseado na Web é registrado, ele fica pronto para aceitar solicitações de pagamento de comerciantes. Neste artigo, ensinamos como orquestrar uma transação de pagamento de um service worker durante o tempo de execução.
ARIA: veneno ou antídoto?
Como mentir para os leitores de tela cura a acessibilidade, mesmo sem esfregar sal!
Como depurar vazamentos de memória no WebAssembly usando o Emscripten
Aprenda a usar o WebAssembly para trazer bibliotecas escritas em outros idiomas para a Web de maneira segura e idiomática.
content-visibilidade: a nova propriedade de CSS que melhora o desempenho de renderização
A propriedade content-visibility do CSS permite benefícios de desempenho na renderização de conteúdo da Web, pulando a renderização de conteúdo fora da tela. Neste artigo, mostramos como usar essa nova propriedade CSS para acelerar os tempos de carregamento inicial usando a palavra-chave "auto". Você também vai aprender sobre a especificação de contenção do CSS e outros valores de visibilidade de conteúdo que oferecem mais controle sobre a renderização do conteúdo no navegador.
Desbloqueando o acesso à área de transferência
A API Async Clipboard simplifica o processo de copiar e colar com permissões.
Práticas recomendadas para referências e políticas de referenciadores
Defina uma política de referenciador de "strict-origin-when-cross-origin". Ela mantém grande parte da utilidade do referenciador e reduz o risco de vazamento de dados em origens cruzadas.
Web no Android
Aprenda como diferentes componentes podem ser usados para renderizar conteúdo da Web em apps Android.
Como criar um PWA no Google, parte 1
O que a equipe do Mural aprendeu sobre service workers ao desenvolver um PWA.
Monitoramento de desempenho com o Lighthouse CI
Saiba como configurar o Lighthouse CI e como integrá-lo aos fluxos de trabalho do desenvolvedor.
Projetar a experiência do usuário com chaves de acesso nas Contas do Google
Mais segurança e melhor experiência do usuário nas Contas do Google.
@property: como atribuir superpoderes às variáveis CSS
Saiba como implementar propriedades personalizadas de CSS com digitação semântica, valores substitutos e muito mais diretamente no arquivo CSS.
Relação da velocidade do site e das métricas de negócios
Utilize o teste A/B para avaliar o impacto da velocidade do site nas suas métricas de negócios.
Como registrar um app de pagamento baseado na Web
Saiba como registrar um app de pagamento baseado na Web no navegador de um cliente. Você também aprenderá a depurá-los.
Visão geral dos apps de pagamento baseados na Web
Saiba como adaptar seu app de pagamento baseado na Web para que ele funcione com o Web Payments e ofereça uma melhor experiência aos clientes.
Armazenamento em cache de service worker e armazenamento em cache HTTP
Os prós e contras do uso de lógica de expiração consistente ou diferente nas camadas de cache do service worker e de cache HTTP
Como fornecer dados de contato e de envio de um app de pagamento para Android
Saiba como modificar seu app de pagamento do Android para fornecer o endereço de entrega selecionado ao usuário, bem como dados de contato quando o comerciante os tiver solicitado usando a API Payment Request.
Como processar solicitações de navegação
Solicitações de navegação são solicitações de HTML feitas sempre que você insere um novo URL na barra de navegação ou segue um link em uma página. É aqui que os service workers causam o maior impacto no desempenho: ao usar um service worker para responder sem esperar pela rede, é possível garantir que as navegações sejam rápidas e resilientes.
Usar o Relatório de UX do Chrome para analisar o desempenho no campo
O Chrome UX Report (informalmente conhecido como CrUX) é um conjunto de dados públicos com dados reais de experiência do usuário em milhões de sites. Ao contrário dos dados de laboratório, os dados do CrUX vêm de usuários do setor que aceitaram.
Renderização perfeita com devicePixelContentBox
Desde o Chrome 84, o ResizeObserver oferece suporte a uma nova medição de caixas chamada device-pixel-content-box, que mede a dimensão do elemento em pixels físicos. Isso é crucial para renderizar gráficos com pixels perfeitos, especialmente no contexto de telas de alta densidade.
Dez layouts modernos em uma linha de CSS
Esta postagem destaca algumas linhas eficientes de CSS que fazem um trabalho pesado e ajudam você a criar layouts modernos e robustos.
Encerramento do web.dev AO VIVO
Um resumo das principais novidades e atualizações anunciadas durante nosso evento da comunidade on-line de três dias e um lembrete dos próximos eventos regionais.
Práticas recomendadas para formulários de login
Use recursos de navegadores multiplataforma para criar formulários de login seguros, acessíveis e fáceis de usar.
Aprimorar progressivamente seu Progressive Web App
Aprenda a aprimorar progressivamente seu Progressive Web App para que ele continue útil em todos os navegadores modernos, mas ofereça uma experiência avançada em navegadores que oferecem suporte a novas funcionalidades da Web, como acesso ao sistema de arquivos, acesso à área de transferência do sistema, recuperação de contatos, sincronização periódica em segundo plano, wake lock de tela, recursos de compartilhamento na Web e muito mais.
Usar recursos de navegadores multiplataforma para criar um formulário de login
Use os recursos de navegadores multiplataforma para criar um formulário de login simples, seguro, acessível e fácil de usar.
Ferramentas para desenvolvedores da Web para depurar problemas de JavaScript na Pesquisa Google
Como depurar problemas de SEO em páginas individuais ou em todo o site.
Como criar experiências de pesquisa resilientes com o Workbox
Como implementar uma experiência de pesquisa resiliente com o Workbox usando a Sincronização em segundo plano e a API Push.
Adicionar mídia a uma página da Web
Incorporar um arquivo de mídia em uma página da Web usando as tags e.
Link em negrito onde ninguém havia vinculado antes: fragmentos de texto
Com os fragmentos de texto, é possível especificar um snippet de texto no fragmento de URL. Ao navegar para um URL com esse fragmento de texto, o navegador pode enfatizar e/ou chamar a atenção do usuário.
Deixe o PWA mais parecido com um app
Entenda como implementar padrões de apps específicos da plataforma com tecnologias da Web para saber como fazer seu Progressive Web App parecer um app "real".
Como registrar um bom bug do navegador
Informar os fornecedores sobre os problemas que você encontra no navegador, em um dispositivo ou plataforma específico é parte integrante do processo de melhoria da plataforma da Web.
Medir o desempenho com o modelo RAIL
O modelo RAIL permite que designers e desenvolvedores segmentem de modo confiável o trabalho de otimização de desempenho que tenha o maior impacto na experiência do usuário. Saiba quais metas e diretrizes o modelo RAIL estabelece e quais ferramentas você pode usar para alcançá-las.
Acelerar as navegações no React com o Quicklink
O Quicklink é uma biblioteca para gerar carregamentos de página subsequentes mais rápidos com a pré-busca de links na janela de visualização durante o tempo de inatividade.
Proteja seus recursos contra ataques na Web com a busca de metadados
A busca de metadados é um novo recurso da plataforma da Web projetado para permitir que os servidores se protejam contra ataques de origem cruzada.
Reordenação de conteúdo
Ao criar um layout usando CSS, tome cuidado para não criar uma experiência desconectada para usuários que navegam pelo teclado.
Melhorias na API Web Animations no Chromium 84
A transformação das suas animações da Web está prestes a ficar muito mais fácil.
Como configurar uma forma de pagamento
Uma transação que usa o Web Payments começa com a descoberta do seu app de pagamento. Saiba como configurar uma forma de pagamento e preparar seu app para comerciantes e clientes fazerem pagamentos.
Guia para desenvolvedores de apps de pagamento do Android
Saiba como adaptar seu app de pagamento para Android para funcionar com os Pagamentos na Web e proporcionar uma melhor experiência aos clientes.
Capacitação de apps de pagamento com o Web Payments
O objetivo da Web Payments é fornecer uma experiência de pagamento simples na Web. Saiba como ele funciona, quais são os benefícios e se prepare para integrar seu app de pagamentos com o Web Payments.
Ciclo de vida de uma transação de pagamento
Saiba como os comerciantes integram apps de pagamento, como as transações funcionam com a API Payment Request e o que é possível fazer com os pagamentos na Web.
Mais opções de fontes variáveis para a fonte da IU do sistema macOS no Chromium 83
O Chromium 80 tinha uma regressão de peso de fonte da IU do sistema no macOS. A razão pela qual ele quebrou e os novos superpoderes pós-resolução valem a pena esperar no Chromium 83.
Realize tarefas rapidamente com os atalhos de apps
Os atalhos de apps oferecem acesso rápido a algumas ações comuns que os usuários precisam realizar com frequência.
Como os Progressive Web Apps podem impulsionar o sucesso dos negócios
Crie um caso de negócios sólido para seu PWA. Saiba quando investir e como medir o sucesso.
Preparação para a remoção do AppCache
Detalhes do Chrome e de outros navegadores planejam remover o AppCache.
Armazenamento persistente
O armazenamento permanente ajuda a proteger dados críticos contra remoção e reduz a chance de perda de dados.
Como definir sua estratégia de instalação
Práticas recomendadas para combinar diferentes ofertas de instalação para aumentar as taxas de instalação e evitar concorrência e canibalização da plataforma.
Como a CommonJS está aumentando seus pacotes
Os módulos CommonJS são muito dinâmicos, o que impede que otimizadores e pacotes JavaScript realizem otimizações avançadas sobre eles.
Por que você precisa do "isolamento de origem cruzada" para recursos avançados
Algumas APIs da Web aumentam o risco de ataques de canal lateral, como o Spectre. Para reduzir esse risco, os navegadores oferecem um ambiente isolado com base na permissão chamado "isolamento de origem cruzada". Saiba por que o isolamento de origem cruzada é necessário para usar recursos poderosos, como `SharedArrayBuffer`, `performance.measureUserAgentSpecificMemory()` e timer de alta resolução com melhor precisão.
Como criar perfis de apps de áudio da Web no Chrome
Saiba como criar o perfil do desempenho de apps de áudio da Web no Chrome usando `about://tracing` e a extensão **WebAudio** no Chrome DevTools.
Melhoria no desempenho do carregamento de páginas do Next.js e do Gatsby com agrupamento granular
Saiba como o Next.js e o Gatsby melhoraram os resultados do build para minimizar o código duplicado e melhorar o desempenho do carregamento de página
"Mesmo site" e "mesma origem"
Os termos "same-site" e "same-origin" são citados com frequência, mas termos muitas vezes mal interpretados. Esta página explica o que são e as diferenças entre eles.
Como tornar seu site "isolado de origem cruzada" usando COOP e COEP
Algumas APIs da Web aumentam o risco de ataques de canal lateral, como o Spectre. Para reduzir esse risco, os navegadores oferecem um ambiente isolado com base na permissão chamado "isolamento de origem cruzada". Use COOP e COEP para configurar esse ambiente e ativar recursos poderosos, como `SharedArrayBuffer`, `performance.measureUserAgentSpecificMemory()` ou timer de alta resolução com melhor precisão.
Monitorar o uso total da memória da sua página da Web com medidaUserAgentSpecificMemory()
Saiba como medir o uso da memória da sua página da Web na produção para detectar regressões.
Blog de engenharia web.dev no 1: como criamos o site e usamos componentes da Web
Nesta primeira postagem da equipe de engenharia do web.dev, saiba mais sobre como criamos o site, incluindo o uso do Eleventy e da Web Components.
Melhoria no estilo padrão do modo escuro com a propriedade CSS do esquema de cores e a metatag correspondente
A propriedade CSS do esquema de cores e a metatag correspondente permitem que os desenvolvedores ativem as páginas nos padrões específicos do tema da folha de estilo do user agent, como, por exemplo, controles de formulário, barras de rolagem e cores do sistema CSS. Ao mesmo tempo, esse recurso impede que os navegadores apliquem transformações por conta própria.
Confira se o site está disponível e pode ser usado por todas as pessoas durante a pandemia da COVID-19
Como garantir que a funcionalidade principal do seu site esteja sempre disponível, acessível, segura, utilizável, detectável e rápido.
Design responsivo acessível
Sabemos que é uma boa ideia projetar de forma responsiva para proporcionar a melhor experiência em vários dispositivos, mas o design responsivo também é uma vitória para a acessibilidade.
Áreas de toque acessíveis
É importante que elementos interativos tenham espaço suficiente ao redor deles quando usados em um dispositivo móvel ou touchscreen. Isso vai ajudar todas as pessoas, principalmente as com deficiências motoras.
Corrigir um servidor sobrecarregado
Como determinar o gargalo de um servidor, corrigir rapidamente o gargalo, melhorar o desempenho do servidor e evitar regressões.
Acessibilidade de cor e contraste
Torne suas páginas mais acessíveis melhorando o uso de cores e contraste.
Evite vulnerabilidades de scripting em vários locais baseado em DOM com os Tipos confiáveis
Conheça os Tipos confiáveis: uma API de navegador que evita scripting em vários locais baseado em DOM em aplicativos da Web modernos.
Como usar um PWA no seu app Android
Como abrir um Progressive Web App em um app Android.
Evite a mudança de layout e o flash de texto invisível (FOIT, na sigla em inglês) pré-carregando fontes opcionais
Ao otimizar os ciclos de renderização, o Chrome 83 elimina a mudança de layout ao pré-carregar fontes opcionais. Combinando com a exibição de fontes: a opção opcional é a maneira mais eficaz de garantir a renderização sem instabilidade de fontes personalizadas.
Como configurar Signed HTTP Exchanges (SXG) usando nginx
Como gerar um certificado TLS com extensões SXG, instalar ferramentas para gerar arquivos SXG e configurar o nginx para exibir arquivos SXG.
Como distribuir Signed HTTP Exchanges (SXG) usando nginx
Como receber e disponibilizar arquivos SXG usando nginx e os desafios da pré-busca de sub-recursos.
Otimizar imagens de plano de fundo CSS com consultas de mídia
Use consultas de mídia para enviar imagens do tamanho necessário, uma técnica conhecida como imagens responsivas.
Correção da velocidade do site de modo multifuncional
Como outros departamentos podem ajudar a aumentar o sucesso do projeto de otimização da velocidade do seu site.
Ajuste de rolagem após mudanças de layout
A partir do Chrome 81, os controles de rolagem permanecem ajustados quando o layout da página muda. Em outras palavras, não é mais necessário adicionar listeners de eventos para forçar o reajuste.
Como configurar trocas assinadas usando o Web Packager
Saiba como veicular trocas assinadas (SXGs) usando o Web Packager.
Como oferecer sua própria experiência de instalação no app
Use o evento beforeinstallprompt para oferecer uma experiência de instalação personalizada e integrada no app para seus usuários.
Posicionar objetos virtuais em visualizações do mundo real
A API WebXR Hit Test é um aprimoramento da realidade aumentada da Web que permite colocar objetos virtuais em uma visão do mundo real.
A realidade virtual chega à Web, parte II
A realidade virtual chegou à Web no Chrome 79. Com base na API WebXR Device, esse lançamento é a base para realidade aumentada e virtual. Este artigo é o segundo de uma série, com foco no loop de frames, a parte de uma sessão de XR em que as imagens são mostradas ao espectador. Em breve, outros navegadores serão compatíveis com a API WebXR Device, como Firefox Reality, Oculus Browser, Edge e Magic Leap's Helio, entre outros.
Realidade aumentada: você talvez já saiba
Se já tiver usado a API WebXR Device, você vai gostar de saber que há muito pouco para aprender. O processo para entrar em uma sessão do WebXR é basicamente o mesmo. A execução de um loop de frame é basicamente a mesma. As diferenças estão nas configurações que permitem a exibição adequada do conteúdo para realidade aumentada.
Como desenvolver o ecossistema de framework da Web
Saiba mais sobre como o Chrome está investindo esforços em várias ferramentas de código aberto para avançar o ecossistema JavaScript
O que são Progressive Web Apps?
Uma introdução aos Progressive Web Apps (PWAs) e aos três pilares que os diferenciam de outros aplicativos da Web.
Compatibilidade com ícones adaptativos em PWAs com ícones mascaráveis
Ícones mascaráveis são um formato que oferece mais controle e permite que o Progressive Web App use ícones adaptativos. Um ícone mascarável pode ter uma ótima aparência em todos os dispositivos Android.
Integrar PWAs a IUs de compartilhamento integradas com o Workbox
Como registrar rotas no Workbox para que seu Progressive Web App apareça em IUs de compartilhamento no nível do sistema, junto com apps específicos da plataforma.
Melhorias na dispensa de páginas em XMLHttpRequest() síncrono
É comum que uma página ou aplicativo não tenha o envio de análises ou outros dados no momento em que o usuário o fecha. Os sites usam uma chamada síncrona para XMLHttpRequest() a fim de manter a página ou o app aberto até que os dados sejam transmitidos para o servidor. Isso prejudica a experiência do usuário e ignora maneiras melhores de economizar dados. O Chrome 80 implementa uma alteração recente na especificação para solucionar isso.
Como criar linhas de execução na Web com workers do módulo
Os workers do módulo facilitam o desbloqueio da linha de execução principal movendo códigos caros para uma linha de execução em segundo plano, mantendo os benefícios ergonômicos e de desempenho dos módulos JavaScript padrão.
Carregamento adaptável: como melhorar o desempenho da Web em dispositivos lentos
Saiba mais sobre o padrão de carregamento adaptável, como implementá-lo e como o Facebook, o Tinder, o eBay e outras empresas usam o carregamento adaptável na produção.
Evoluções das ferramentas de velocidade: destaques da Conferência de Desenvolvedores do Chrome 2019
Leia sobre os desenvolvimentos mais recentes em ferramentas de velocidade, incluindo novas métricas de desempenho, atualizações no PageSpeed Insights e no Relatório de experiência do usuário do Chrome (CrUX, na sigla em inglês) e insights da análise de Almanaque da Web do ecossistema da Web.
Use web workers para executar JavaScript fora da thread principal do navegador
A sequência principal do navegador está incrivelmente sobrecarregada. Ao usar Web workers para deslocar o código da linha de execução principal, você pode melhorar significativamente a confiabilidade e a experiência do usuário do seu app.
Feedback da pesquisa de otimização de imagens de 2019
Comentários dos participantes da pesquisa sobre várias técnicas de otimização de imagens.
Criar um servidor de notificações push
Neste codelab, você vai aprender a criar um servidor de notificações push.
Pré-busca de rotas no Next.js
Como o Next.js acelera a navegação com o pré-carregamento de rotas e como personalizar essa funcionalidade. Neste post, você vai aprender como funciona o roteamento no Next.js, como ele é otimizado para velocidade e como personalizá-lo para melhor
Integrar a IU de compartilhamento do SO usando a API Web Share
Com a API Web Share, os aplicativos da Web podem usar os mesmos recursos de compartilhamento fornecidos pelo sistema que os apps específicos da plataforma. A API Web Share possibilita que apps da Web compartilhem links, textos e arquivos com outros apps instalados no dispositivo da mesma forma que apps específicos da plataforma.
Divisão de código com importações dinâmicas no Next.js
Como acelerar seu app Next.js com estratégias de divisão de código e carregamento inteligente. Esta postagem explica diferentes tipos de divisão de código e como usar importações dinâmicas para acelerar seus apps do Next.js. Por padrão, o Next.js
Desempenho como padrão com o Next.js
O Next.js cuida de muitas otimizações no seu app React para que você não precise O Next.js é um framework React com várias otimizações de desempenho integradas. A ideia principal por trás do framework é garantir que os aplicativos sejam iniciados e
Como o AMP pode garantir a rapidez no app Next.js
Saiba mais sobre as vantagens e desvantagens de oferecer compatibilidade com AMP no seu app Next.js A AMP é um framework de componentes da Web que garante o carregamento rápido de páginas. O Next.js é compatível com AMP. Primeiro, este guia descreve
A realidade virtual chega à Web
A realidade virtual chegou à Web no Chrome 79. Com base na API WebXR Devicer, esse lançamento é a base para realidade aumentada e virtual. Este artigo é o primeiro de uma série, explorando conceitos básicos e descrevendo como entrar em uma sessão de XR. Em breve, outros navegadores serão compatíveis com a API WebXR Device, como Firefox Reality, Oculus Browser, Edge e Magic Leap's Helio, entre outros.
Compreensão dos cookies
Saiba como os cookies funcionam e o que são cookies primários e de terceiros.
Receitas de cookies SameSite
Agora os sites podem marcar explicitamente os cookies para uso entre sites. Saiba como fazer a marcação dos seus cookies para garantir que os cookies primários e de terceiros continuem funcionando após a implementação dessa mudança.
Anúncios rápidos são importantes
Entenda a importância dos anúncios rápidos e a velocidade deles.
Usar notificações push para engajar e reengajar usuários
Use notificações push para engajar os usuários com atualizações direcionadas e oportunas.
Começar a usar a API Notifications
Neste codelab, você vai aprender a solicitar a permissão do usuário e enviar notificações.
Usar um service worker para gerenciar notificações
Neste codelab, você vai aprender a gerenciar notificações com um service worker.
Corrigir instabilidade de layout
Instruções sobre como usar o WebPageTest para identificar e corrigir problemas de instabilidade de layout.
Técnicas para fazer um app da Web carregar rapidamente, mesmo em um feature phone
Os feature phones estão ressurgindo e são populares, especialmente em mercados emergentes, onde a rede 2G é a norma. Confira o que aprendemos ao fazer o PROXX, um clone do Minesweeper para dispositivos móveis, carregar rapidamente em feature phones 2G.
Propriedades personalizadas mais inteligentes com a nova API da Houdini
Embora sejam úteis, é difícil trabalhar com as variáveis CSS, porque elas podem assumir qualquer valor e ser substituídas, e não é possível usar transições com elas. A API CSS Properties e Values de nível 1 resolve esses problemas.
Buscar recursos para acelerar navegações futuras
Saiba mais sobre a dica de recurso rel=prefetch e como usá-la.
Duas formas de pré-busca: tags <link> e cabeçalhos HTTP
Aprenda a acelerar navegações futuras fazendo a pré-busca de recursos.
O que é conteúdo misto?
O conteúdo misto ocorre quando o HTML inicial é carregado por uma conexão HTTPS segura, mas outros recursos são carregados por uma conexão HTTP não segura.
Corrigir conteúdo misto
Saiba como corrigir erros de conteúdo misto no seu site para proteger os usuários e garantir que todo o conteúdo seja carregado.
Vá além das imagens com vídeos básicos para a Web
Pesquisas mostram que vídeos da Web aumentam o engajamento e as vendas. Mesmo que você ainda não tenha adicionado vídeos aos seus sites, levará apenas um tempo.
Adicionar um ícone de toque da Apple ao seu Progressive Web App
Uma demonstração interativa de como especificar qual ícone deve aparecer nas telas iniciais do iOS.
Player pronto para a Web
Atualmente, a plataforma da Web está muito madura para o desenvolvimento de jogos. A chave para criar um jogo da Web moderno é adotar as práticas recomendadas de design e monetização. Esta publicação fornece orientações para atingir esse objetivo.
Progressive Web Apps em sites de várias origens
Arquiteturas de várias origens apresentam muitos desafios na criação de PWAs. Explore os usos bons e ruins de várias origens e algumas soluções alternativas para criar PWAs em sites de várias origens.
Otimizar o carregamento e a renderização de WebFont
Esta postagem explica como carregar WebFonts para evitar mudanças de layout e páginas em branco quando WebFonts não estiverem disponíveis durante o carregamento da página.
Reduzir o tamanho da fonte na Web
Esta postagem explica como reduzir o tamanho das WebFonts usadas no seu site para que uma boa tipografia não signifique um site lento.
Criar um Progressive Web App com a CLI Angular
Aprenda a criar aplicativos Angular progressivos instaláveis.
Carregar JavaScript de terceiros com eficiência
Saiba como melhorar os tempos de carregamento e a experiência do usuário evitando as armadilhas comuns de usar scripts de terceiros.
Identificar JavaScript de terceiros lento
Aprenda a usar o Lighthouse e o Chrome DevTools para identificar recursos de terceiros lentos.
Usar CDNs de imagens para otimizar imagens
Use uma CDN de imagens para otimizar as imagens do seu site e reduzir o custo de dados para os usuários.
Desempenho de JavaScript de terceiros
Esta postagem descreve os tipos comuns de JavaScript de terceiros e os problemas de desempenho que eles podem causar. Ele também fornece orientações gerais sobre como otimizar scripts de terceiros.
Controles de formulário mais eficientes
Os novos recursos da plataforma da Web facilitam a criação de elementos personalizados que funcionam como controles de formulários integrados.
Otimizar o JavaScript de terceiros
Aprenda técnicas para otimizar recursos lentos de terceiros com a ajuda do Lighthouse.
Estabeleça conexões de rede cedo para melhorar a velocidade percebida da página
Saiba mais sobre as dicas de recursos rel=preconnect e rel=dns-prefetch e como usá-las.
Crie planos de fundo no estilo do SO com filtro de pano de fundo
Aprenda a adicionar efeitos de plano de fundo, como desfoque e transparência, a elementos da IU na Web usando a propriedade CSS de pano de fundo.
Como manter tudo atualizado com o método desatualizado-while-revalidate
O método de anti-while-revalidate ajuda os desenvolvedores a equilibrar o imediatismo, ou seja, o carregamento imediato de conteúdo em cache, e a atualização, garantindo que as atualizações feitas no conteúdo em cache sejam usadas no futuro.
Virtualizar listas grandes com o CDK do Angular
Saiba como tornar listas grandes mais responsivas implementando a rolagem virtual com o kit de desenvolvimento de componentes do Angular.
Otimizar a detecção de alterações do Angular's
Saiba como otimizar a detecção de alterações do seu app Angular para que ele fique mais responsivo.
Estratégias de pré-carregamento de rotas no Angular
Aprenda a usar as estratégias de pré-carregamento do Angular para apps mais rápidos.
Navegação na Web mais rápida com pré-busca preditiva
A divisão de código permite que você acelere os aplicativos, mas pode tornar a navegação posterior. A pré-busca preditiva é uma maneira eficiente de usar a análise de dados para pré-buscar de maneira inteligente o que o usuário provavelmente vai usar em seguida, otimizando a utilização da rede.
Adapte o vídeo à veiculação de imagens com base na qualidade da rede
Aprenda a usar a API Network Information para adaptar seu conteúdo com base na qualidade da rede.
Auditar a acessibilidade do seu app Angular com o codelyzer
Saiba como tornar seu aplicativo do Angular acessível usando o codelyzer.
Orçamentos de desempenho com a CLI Angular
Saiba como usar os orçamentos de performance diretamente na CLI do Angular.
Pré-armazenamento em cache com o service worker do Angular
Aprenda a usar o service worker do Angular para pré-armazenar em cache os recursos estáticos no seu app.
prefere-color-scheme: Olá, escuridão, meu velho amigo
Muitos dispositivos agora oferecem suporte a experiências de tema escuro ou modo escuro amplo do sistema operacional. Esta postagem explica como o modo escuro pode ser compatível com páginas da Web, lista as práticas recomendadas e apresenta um elemento personalizado chamado de alternância de modo escuro, que permite aos desenvolvedores da Web oferecer aos usuários uma maneira de substituir a preferência no nível do sistema operacional em páginas específicas.
Comece agora: otimizar um aplicativo do Angular
Aprenda a deixar seu aplicativo do Angular mais rápido, confiável, detectável, instalável e acessível.
Divisão de código no nível da rota no Angular
Aprenda a reduzir o pacote de apps inicial usando a divisão de código no nível da rota.
Dicas importantes para a performance da Web
Use srcset para escolher automaticamente o tamanho certo da imagem.
Componentes da Web: o ingrediente secreto que ajuda a alimentar a Web
Esta postagem resume uma palestra sobre o estado dos componentes da Web em 2019, proferida por Kevin Schaaf, do Polymer Project, e Caridy Patiño, do Salesforce.
Usar o Lighthouse para orçamentos de performance
O Lighthouse agora oferece suporte aos orçamentos de desempenho. Esse recurso, LightWallet, pode ser configurado em menos de cinco minutos e fornece informações sobre o tamanho e a quantidade de recursos da página.
Atualizações nas APIs Web Payments
Desde o lançamento da API Payment Request no Chrome 53 e da Payment Handler API no Chrome 68, várias mudanças foram feitas nas especificações relacionadas. Esta publicação resume essas atualizações e continuará acumulando as alterações da API.
O valor da velocidade
Demonstre a receita gerada pelas melhorias do site e exclua fatores externos, como campanhas de marketing.
Instalação da barra de endereço para Progressive Web Apps no computador
É fácil instalar esses Progressive Web Apps com um novo botão de instalação na barra de endereço do Chrome (omnibox).
Como a performance pode melhorar a conversão?
Saiba o impacto que a performance do site tem em diferentes partes do funil de e-commerce
Padrões para promover a instalação do PWA
Como promover a instalação de Progressive Web Apps e práticas recomendadas.
Mentalidade de service worker
O trabalho com service workers é novo e pouco familiar para muitos desenvolvedores da Web. Esta postagem traz algumas dicas para entender tudo isso.
Como notifico os usuários de que meu PWA pode ser instalado?
Como promover a instalação de Progressive Web Apps e práticas recomendadas.
Políticas de imagem para carregamento rápido e muito mais
As imagens ocupam uma quantidade significativa de espaço visual e constituem a maioria dos bytes transferidos em um site. Use as novas políticas de recursos para identificar imagens muito grandes.
As tarefas longas de JavaScript estão atrasando o tempo para interação da página?
Aprenda a diagnosticar interações caras e que impedem o trabalho dos usuários.
Extrair CSS crítico
Aprenda a melhorar os tempos de renderização com a técnica CSS essencial e como escolher a melhor ferramenta para seu projeto.
Extraia e insira CSS crítico inline com código
Saiba como usar a ferramenta Crítica para extrair e inserir CSS crítico em linha e melhorar os tempos de renderização.
Velocidade em escala: o que há de novo no desempenho na Web?
Para o Google I/O 2019, apresentamos três novas iniciativas de desempenho na Web que esperamos que elas criem experiências de usuário melhores para todos.
Introdução ao PROXX
PROXX como um jogo semelhante ao Campo minado criado como um PWA. Ele funciona em uma grande variedade de dispositivos e melhora progressivamente a aparência visual quanto mais capacidade o dispositivo tiver.
Explicação sobre cookies SameSite
Saiba como marcar seus cookies para uso próprio e de terceiros com o atributo SameSite. Você pode aprimorar a segurança do seu site usando valores Lax e Strict do SameSite para melhorar a proteção contra ataques CSRF. A especificação do novo atributo "None" permite marcar explicitamente seus cookies para uso entre sites.
Pesquisa visual com o Web Perception Toolkit
Não seria ótimo se os usuários pudessem pesquisar no seu site usando a câmera?
Experiência ativa com portais: navegação perfeita na Web
A nova API Portals ajuda a manter seu front-end simples ao mesmo tempo em que permite navegações perfeitas com transições personalizadas. Neste artigo, aprenda a usar os portais para melhorar a experiência do usuário no seu site.
Veiculação adaptável com base na qualidade da rede
Usar a API Network Information para adaptar os recursos veiculados aos usuários com base na qualidade da conexão.
Minifique e compacte payloads de rede com o brotli
Neste codelab, você vai aprender como a compactação do Brotli pode reduzir ainda mais as taxas de compactação e o tamanho geral do seu app.
web.dev no I/O 2019
Para o Google I/O 2019, a equipe do web.dev enviou diversas atualizações, incluindo um design atualizado, mais documentos do Lighthouse e um novo blog.
Como medir a velocidade?
O desempenho no mundo real é altamente variável devido a diferenças nos dispositivos dos usuários, conexões de rede e outros fatores. Nesta postagem, vamos conhecer ferramentas que ajudam você a coletar dados de laboratório ou campo para avaliar o desempenho da página.
Como permanecer rápido?
As marcas que otimizam a velocidade geralmente percebem regressar rapidamente. Nesta postagem, explicamos como garantir que sua experiência seja rápida.
O que é velocidade?
A velocidade é importante, mas o que isso quer dizer? O que significa ter um site rápido?
Auditoria de acessibilidade com react-axe e eslint-plugin-jsx-a11y
O reação-axe é uma biblioteca que audita um aplicativo React e registra todos os problemas de acessibilidade no console do Chrome DevTools. O eslint-plugin-jsx-a11y é um plug-in ESLint que identifica e aplica várias regras de acessibilidade diretamente no JSX. O uso combinado desses elementos pode oferecer uma abordagem de auditoria abrangente para localizar e corrigir problemas de acessibilidade no aplicativo.
Como começar: otimizar seu app React
O React é uma biblioteca de código aberto que facilita a criação de IUs. Este programa de aprendizado aborda diferentes APIs e ferramentas do ecossistema que você pode usar para melhorar o desempenho e a usabilidade do aplicativo.
Divisão de código com React.Lazy e Suspense
O método React.Lazy facilita a divisão de código de um aplicativo do React no nível do componente usando importações dinâmicas. Use-o com o suspense para mostrar os estados de carregamento adequados aos seus usuários.
Pré-armazenamento em cache no app Create React com o Workbox
O Workbox está integrado ao app Create React com uma configuração padrão que pré-armazena em cache todos os recursos estáticos no seu aplicativo a cada build.
Virtualize listas grandes com uma janela de reação
O React-window é uma biblioteca que permite que listas grandes sejam renderizadas de maneira eficiente.
Pré-renderizar rotas com o React-snap
O React-snap é uma biblioteca de terceiros que pré-renderiza as páginas do site em arquivos HTML estáticos. Isso pode melhorar os tempos da primeira exibição no aplicativo.
Adicionar um manifesto de app da Web com o app Create React
Por padrão, o Create React App inclui um manifesto de app da Web. Modificar este arquivo permitirá que você altere a forma como o seu aplicativo é exibido quando instalado no dispositivo do usuário.
Codelab: pré-carregue recursos essenciais para melhorar a velocidade de carregamento
Neste codelab, aprenda a melhorar o desempenho de uma página com o pré-carregamento e a pré-busca de recursos.
prefere-redução-movimento: às vezes, menos movimento é mais
A consulta de mídia "prefers-reduced-motion" detecta se o usuário solicitou que o sistema minimize a quantidade de animação ou movimento usado. Isso se destina a usuários que exigem ou preferem animações minimizadas. Por exemplo, pessoas com distúrbios vestibulares geralmente preferem que as animações sejam mínimas.
Adiar CSS não essencial
Saiba como adiar CSS não essencial para otimizar o caminho crítico de renderização e melhorar a primeira exibição de conteúdo (FCP, na sigla em inglês).
Confiança é boa, observação é melhor: Intersection Observer v2
O Intersection Observer v2 adiciona o recurso não apenas de observar interseções por si só, mas também de detectar se o elemento de interseção estava visível no momento da interseção.
Fundamentos do Web design responsivo
Crie sites que respondam às necessidades e aos recursos do dispositivo em que estão sendo visualizados.
Folhas de estilo construíveis
As folhas de estilo construíveis oferecem uma maneira simples de criar e distribuir estilos para documentos ou raízes paralelas sem se preocupar com o FOUC.
Renderização na Web
Recomendações para implementar lógica e renderização em apps.
Incorporar orçamentos de performance no processo de criação
A melhor maneira de ficar de olho no seu orçamento de performance é automatizá-lo. Descubra como escolher a ferramenta mais adequada às suas necessidades e à configuração atual.
Como usar o bundlesize com o Travis CI
Defina orçamentos de desempenho com configuração mínima e aplique-os como parte do seu fluxo de trabalho de desenvolvimento usando bundlesize com o Travis CI.
Como definir orçamentos de desempenho com o webpack
Saiba como definir orçamentos de desempenho e manter o tamanho dos seus pacotes sob controle com o webpack.
Como usar o bot do Lighthouse para definir um orçamento de performance
Você trabalhou duro para acelerar o processo. Agora, automatiza os testes de desempenho no Travis CI com o Lighthouse Bot.
Emscripten e npm
Como você integra o WebAssembly a essa configuração? Neste artigo, vamos resolver isso usando C/C++ e Emscripten como exemplo.
Seu app está instalado? getinstaladoRelatedApps() vai avisar você!
Com a API get provavelmenteRelatedApps(), para plataforma da Web, você pode verificar se o aplicativo para iOS/Android/computador ou PWA está instalado no dispositivo do usuário.
Exibir códigos modernos em navegadores modernos para acelerar o carregamento de página
Neste codelab, você vai aprender a melhorar a performance de um aplicativo minimizando a quantidade de código transcompilada.
Como adaptar aos usuários com dicas do cliente
Dicas do cliente são um conjunto de cabeçalhos de solicitação HTTP que podem ser usados para alterar a forma como fornecemos recursos da página com base nas características do dispositivo e da conexão de rede do usuário. Neste artigo, você aprenderá tudo sobre as dicas do cliente, como elas funcionam e algumas ideias de como usá-las para tornar seu site mais rápido para os usuários.
O que é acessibilidade?
Um site acessível é aquele cujo conteúdo pode ser acessado independentemente das deficiências do usuário e cuja funcionalidade também pode ser operada pelo grupo mais diverso de usuários possível.
Usar HTML semântico para facilitar o uso do teclado
Ao usar os elementos HTML semânticos corretos, você pode atender à maioria ou a todas as suas necessidades de acesso por teclado. Isso significa menos tempo mexendo no tabindex e mais usuários satisfeitos.
Controlar o foco com o tabindex
Os elementos HTML padrão têm acessibilidade de teclado integrada. Ao criar componentes interativos personalizados, use tabindex para garantir que eles possam ser acessados pelo teclado.
Rótulos e alternativas de texto
Para que um leitor de tela apresente uma interface falada para o usuário, elementos significativos precisam ter rótulos ou alternativas de texto adequadas. Uma alternativa de marcador ou texto dá a um elemento um nome acessível, uma das principais propriedades para expressar a semântica de elementos na árvore de acessibilidade.
Semântica e leitores de tela
Você já parou para se perguntar como a tecnologia assistiva, como um leitor de tela, sabe o que anunciar aos usuários? A resposta é que essas tecnologias dependem de desenvolvedores que marcam suas páginas com HTML semântico. Mas o que são semânticas e como os leitores de tela as usam?
Foco de estilo
O indicador de foco (geralmente representado por um "anel de foco") identifica o elemento em foco no momento. Para usuários que não conseguem usar um mouse, esse indicador é extremamente importante, pois funciona como um substituto para o ponteiro do mouse.
Títulos e pontos de referência
Ao usar os elementos corretos para cabeçalhos e pontos de referência, você pode melhorar significativamente a experiência de navegação dos usuários da tecnologia assitiva.
Conceitos básicos do acesso ao teclado
Muitos diferentes usuários dependem do teclado para navegar pelos aplicativos, desde usuários com deficiências motoras temporárias e permanentes até usuários que usam atalhos de teclado para serem mais eficientes e produtivos. Ter uma boa estratégia de navegação pelo teclado para o aplicativo cria uma experiência melhor para todos.
Usar o Imagemin para compactar imagens
Imagens não compactadas sobrecarregam suas páginas com bytes desnecessários. Execute o Lighthouse para verificar oportunidades de melhorar o carregamento de página compactando imagens.
Como configurar o comportamento de armazenamento em cache HTTP
Neste codelab, você vai aprender a controlar o comportamento de armazenamento em cache de recursos usando cabeçalhos HTTP.
Identificar os recursos carregados da rede
Criar as estratégias corretas de armazenamento em cache para seu aplicativo da web exige entender exatamente o que você está carregando. Ao criar um aplicativo da Web confiável, a rede pode estar sujeita a todos os tipos de forças do mal. Você precisa entender as vulnerabilidades da rede para lidar com elas no seu app.
Política de mesma origem
Um navegador pode carregar e mostrar recursos de vários sites. Se não houver restrições nas interações entre esses recursos e um script for comprometido por um invasor, ele poderá expor tudo do navegador do usuário.
Evite flash de texto invisível
Neste codelab, aprenda a exibir texto imediatamente usando o Font Face Observer.
Mesma política de origem e solicitações de busca
Neste codelab, você vai aprender como a política de mesma origem funciona ao buscar recursos.
Veicular imagens com dimensões corretas
Neste codelab, você vai aprender a exibir imagens com as dimensões corretas para melhorar o desempenho da rede.
Orçamentos de performance 101
Um bom desempenho raramente é um efeito colateral. Saiba mais sobre orçamentos de performance e como eles podem preparar você para o sucesso.
O que são ataques de segurança?
Um app não seguro pode expor usuários e sistemas a vários tipos de danos. Quando uma parte mal-intencionada usa vulnerabilidades ou a falta de recursos de segurança a seu favor para causar danos, isso é chamado de ataque. Veremos os diferentes tipos de ataque neste guia para que você saiba o que procurar ao proteger seu aplicativo.
Seu primeiro orçamento de performance
Verifique se o site carrega rapidamente com um guia explicativo sobre como definir limites para as métricas de desempenho relevantes para seu site.
Reduzir payloads de JavaScript com a divisão de código
O envio de grandes payloads de JavaScript afeta significativamente a velocidade do seu site. Em vez de enviar todo o JavaScript ao usuário assim que a primeira página do seu aplicativo for carregada, divida seu pacote em várias partes e envie somente o que for necessário logo no início.
Como criar imagens WebP com a linha de comando
Neste codelab, você vai aprender a exibir imagens otimizadas usando o WebP.
Pré-carregue recursos essenciais para melhorar a velocidade de carregamento
Assim que você abre qualquer página da web, o navegador solicita um documento HTML de um servidor, analisa o conteúdo do arquivo HTML e envia solicitações separadas para outras referências externas. A cadeia de solicitações crítica representa a ordem dos recursos que são priorizados e buscados pelo navegador.
Substitua GIFs animados por vídeos para acelerar o carregamento da página
Você já viu um GIF animado em um serviço como o Imgur ou o Gfycat e o inspecionou nas ferramentas do desenvolvedor e descobriu que, na verdade, era um vídeo? Existe um bom motivo para isso. GIFs animados podem ser enormes! Ao converter GIFs grandes em vídeos, você pode economizar muito na largura de banda dos usuários.
Remover código não utilizado
Neste codelab, você vai aprender a melhorar a performance de um aplicativo removendo dependências não utilizadas e desnecessárias.
Tornar o app instalável
Neste codelab, aprenda a tornar um site instalável usando o evento beforeinstallprompt.
Compartilhamento de recursos entre origens (CORS, na sigla em inglês)
A política de mesma origem do navegador bloqueia a leitura de um recurso de uma origem diferente por motivos de segurança. Ativar o CORS permite que o servidor informe ao navegador que ele pode usar uma origem adicional.
Corrigir erros 404 não autorizados
Neste codelab, você vai aprender a detectar um erro 404 não autorizado que pode impedir que sua página seja indexada.
Como medir a otimização de mecanismos de pesquisa com o Lighthouse
A auditoria de SEO do Lighthouse verifica sua página, testa itens importantes para os mecanismos de pesquisa e fornece uma pontuação para que você possa ver áreas específicas que podem melhorar. O SEO é importante porque é como você faz com que mais usuários relevantes vejam seu conteúdo.
Usar imagens WebP
As imagens WebP são menores do que as contrapartes JPEG e PNG, geralmente com a magnitude de uma redução de 25 a 35% no tamanho do arquivo. Isso diminui o tamanho das páginas e melhora o desempenho.