Já pensou em utilizar Componentes AMP em qualquer tipo de aplicação? O time do AMP vem trabalhando a mais de 2 anos tentando habilitar componentes AMP fora do ecossistema do AMP e esse projeto é chamado de Bento AMP.
Esse projeto ainda não está 100% pronto, mas está disponível a sua versão pre-release. Você já pode testar em:
O objetivo do AMP é criar uma experiência para usuários e desenvolvedores, usuários tendo uma experiência responsiva e rápida. Para desenvolvedores com um conjunto de ferramentas que ajudam a otimizar o fluxo de desenvolvimento. Os componentes de alta performance focados nos usuários são uma parte essencial para entrar essa experiência para os desenvolvedores.
E agora com Bento AMP você poderá usar os componentes AMP somente quando necessário. Isso significa com a situação atual, de ter somente duas soluções: somente AMP ou prover duas versões não será o único caminho. Podemos unir os dois mundos. Assim achando um equilíbrio entre as duas opções.
Por exemplo, agora é possível utilizar os componentes AMP de forma isolada, você pode adicionar um, carrossel numa página não AMP. Isso abre possibilidade para uma série de melhorias em usa aplicação sem ter a necessidade de tem uma aplicação inteira em AMP.
Como Bento funciona ?
Anteriormente, componentes AMP utilizavam web components mais o AMP runtime para executar esses elementos. Agora com Bento esse processo é realizado com preact, os componentes Bento AMP são processados e Web components e entregues aos usuários seguindo os padrões web.
Preview para desenvolvedores
Atualmente já é possível testar Bento AMP se você é um desenvolvedor você pode acessar o github do projeto e dar o seu feedback sobre o novo fluxo do AMP. Atualmente o bento AMP continua precisando do AMP runtime para funcionar, mas não é mais necessário ter uma página válida AMP para fazer uso desses recursos.
O que está disponível hoje?
Caso queira testar o componentes Bento, hoje estão de forma experimental os seguintes componentes:
amp-accordion
amp-base-carousel
amp-inline-gallery
amp-stream-gallery
amp-date-countdown
amp-date-display
amp-fit-text
amp-instagram
amp-lightbox
amp-selector
amp-social-share
amp-timeago
amp-youtube
amp-video
Vale lembrar que hoje utilizando bento components sua páginas AMP ficarão inválidas mas isso até a versão final será resolvido
O futuro de Bento
Uma vez que o tenha uma versão estável e com todos os principais componentes a ideia é publicar uma versão de Bento AMP para React com uma estrutura de pacotes npm facilitando o uso de AMP para aplicações React.
Uma pergunta no meu canal chamou-me atenção para fazer este post:
Cara, fiz o amp aqui no meu site, mas as visitas caíram 70%, sabe-me dizer se tem algum motivo principal para isso?
Isso é uma pergunta que as causas podem ser diversas, mas nesse posts vamos listar alguns possíveis problemas, vou focar no plugin oficial do Google, mas algumas regras podem ser aplicadas a outros plugins. Primeiramente você precisa entender como funciona o plugin de AMP, as suas limitações e o modos que ele trabalha, eu tenho o vídeo no meu canal do Youtube onde eu explico mais sobre eles, mas em resumo nos temos:
Modo leitor, com uma experiência mais simples onde você não precisa se preocupar como os problemas de javascript.
Modo de transição, onde você tem parte do seu conteúdo em AMP e não AMP
Modo padrão, onde seu conteúdo por padrão será AMP, mas para isso você precisa utilizar plugins e temas compatíveis.
Uma vez que o seu site já está em produção, o ideal é verificar o desempenho do seu site na versão AMP e não AMP na busca. Os dois primeiros modos disponibilizar duas versões para o seu site se analytics estiver habilitado acompanhe a audiência em ambos e veja se vale a pena ou não ir full AMP.
Falando em Analytics vamos falar o que interessa, a lista de items que pode afetar a sua audiência:
1. Esquecer de ativar o Google Analytics
Parece algo banal, mas é algo bastante comum. Você instala o plugin e não configura o Google analytics e vê a sua audiência despencar, neste caso você não está perdendo audiência, mas está deixando de monitora-la. Quando você trabalha com AMP a forma de adicionar o script de monitoramento do Google Analytics muda, é preciso de uma tag específica para realizar a contagem de visitas do usuário. Você pode realizar a inclusão de diversas maneiras:
Adicionando a configuração: para isso você irá precisa do ID do seu Google Analytics, e ir nas configurações do plugin AMP, selecionar analytics e adicionar o código JSON para monitoramento.
Segunda forma é através do plugin Site Kit
exemplo da tela de adição do código do analytics
2. Deixar as páginas AMP com erros
O primeiro requisito para a sua página ser indexada nos resultados de busca do Google como uma página AMP, é ser uma página Válida em outras palavras: não deve conter erros AMP.
Se você publicar uma seu projeto cheio de erros AMP, dependendo do formato que você escolher(Leitor, padrão e transição). Você irá tirar todas as suas páginas da busca. O ideal é se você não tem um tema compatível, você deve escolher ou o modo leitor, ou o modo de transição e monitorar os erros da sua página.
3. Mudança de tema junto com a instalação do plugin
Muitas vezes a solução é mudar para um tema compatível, mas antes de fazer a migração você deve prestar atenção em alguns fatores:
Mapa de navegação, preste atenção se o tema tem esquema de navegação similar ao tema que você utiliza. Caso queira realizar a mudança na navegação lembre de submeter o novo sitemap.
O esquema de títulos de páginas permanecem os mesmos.
Desempenho do tema, o tema na versão AMP tem um desempenho melhor ou pior ao seu tema anterior
Monitore os erros 404 da sua aplicação
4. Falta de acompanhamento na transição
Tudo ocorreu bem durante a migração, páginas estão válidas, esquema de navegação não foi alterado, e agora?
Monitore… Monitore… Monitore…
O trabalho de melhoria de um aplicação web é contínuo, muitas vezes as pessoas instalam um plugin e depois largam a aplicação como se tudo já estivesse ocorrendo bem. Sempre é bom acompanhar o seu site e a melhor ferramenta para ver o desempenho de sua aplicação na busca do Google é o Search Console.
Nele você pode acompanhar como o seu site se comporta na busca e quais páginas AMP estão sendo indexadas na busca do Google. Caso escolha o modo leitor e de transição, é muito importante comparar o desempenho entre as duas versões, a versão AMP e a versão AMP. Com isso ver se faz sentido migrar ou não e onde você deve melhorar em sua versão AMP.
Página de monitoramento do Search Console
5. Mudanças nos requisitos da busca
Vale lembrar que você não é o centro do universo, as vezes a mudança na sua audiência pode está relaciona com alguma mudança no rankeamento do Google, por exemplo, Core web vitals são novas regras que alteram os fatores para sua página possuir um bom posicionamento na busca, ele está sendo introduzido gradualmente desde do mês de Julho de 2021.
Dependendo de qual modo você utiliza em sua aplicação para entregar páginas AMP e páginas não AMP sua queda na audiência pode estar ocorrendo na suas páginas não AMP, por exemplo, ou Suas páginas AMP precisam de atenção.
Lembrando que AMP ajuda a melhorar o despenho no front-end de sua aplicação, problemas como entrega de imagens e resposta do servidor pode afetar o tempo de entrega do seu conteúdo.
6. Por fim time que se ganha não se mexe
Se o seu tema não AMP já tem um ótimo desempenho, você possui noções de desenvolvimento e realiza manutenções frequentes na sua aplicação. Você precisa realmente mudar sua aplicação para AMP ?
Antes de realizar a migração, teste quão melhor é sua versão AMP comparada a sua versão não AMP?
Quanto a versão AMP afeta as funcionalidades da sua aplicação?
Quanto tempo você tem para atualizar sua aplicação.
Qual é o melhor modo referente a sua aplicação
Alguns casos a instalação de AMP pode não ser necessária, caso você já tenha um tema com um ótimo desempenho, para isso você pode testar sua aplicação na página de relatórios do web.dev
Sempre estude as vantagens de uma tecnologia antes de usar veja os seus pros e contras. Como essa tecnologia se adequa a sua realidade, pois não existe bala de prata e sim existem ferramentas para cada tarefa.
Eu utilizo o plugin do AMP a mais de dois anos, mas claro utilizo o tema padrão do WordPress e não uso nenhum plugin mirabolante, o meu foco principal é o conteúdo e não preciso preocupar-me com melhorias de desempenho nas minhas páginas ou melhorias para dispositivos móveis, o plugin toma conta disso tudo para mim.
Como transformar a minha aplicação Vue.js em uma progressive web app?
O curso que rodo no YouTube é focado em vanilla JavaScript e tem uma configuração específica utilizando webpack em um certo momento. E uma pergunta recorrente é como transformar aplicações que utilizam bibliotecas e frameworks JavaScript em uma Progressive Web App. Para aplicações Vue.js, React ou Angular. Cada uma possui caminhos específicos que podem facilitar a implementação da sua PWA.
Vue
Para transformar a sua aplicação vue.js em uma PWA o caminho mais fácil é através do Vue CLI(command line interface) ele irá te auxiliar com a configuração e criação dos arquivos necessários para você criar uma progressive web app.
Após criar sua aplicação vue com o comando “vue create nome-do-seu-app” você irá executar o seguinte comando:
vue add pwa
Você precisará executar esse comando em seu terminal de linha de comando. Assim será instalado o pacote @vue/cli-plugin-pwa, ele irá adicionar um service worker que será habilitado somente em produção ou seja quando você roda os comando “npm run build” ou “yarn build”. A configuração de sua pwa será feito ou pelo arquivo vue.config.js ou em seu package.json dependendo se sua instalação.
Exemplo:
// Dentro vue.config.jsmodule.exports = {
// ...outras opções do vue-cli plugin...pwa: {
name: 'My App',
themeColor: '#4DBA87',
msTileColor: '#000000',
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black',
// configuração do workbox pluginworkboxPluginMode: 'InjectManifest',
workboxOptions: {
// swSrc é necessário para o modo injectManifest.swSrc: 'dev/sw.js',
// ...outras opções do WorkBox...
}
}
}
Code language:JavaScript(javascript)
Como podemos ver o plugin do vue-cli utiliza workbox para fazer a configuração de sua PWA.
Angular
Para transformar a sua aplicação Angular em uma Progressive Web Apps você irar executar no seu terminal o seguinte comando:
ngadd@angular/pwa
Code language:CSS(css)
Esse comando irá:
Adicionar uma Service Worker com uma configuração padrão de cache.
Criar um arquivo manifest json para a sua aplicação
Adicionar um link para o arquivo manifest no seu index.html
Criar os ícones para a sua aplicação no diretório “src/assets”
React
Existem templates específicos quando você utilizar create-react-app para criar um projeto. Por exemplo:
Nesse post vamos falar sobre a palavra-chave currentColor do CSS ele já está aí a um bom tempo e ela pode ser bem útil para melhorar o nosso código CSS e nesse tutorial vamos ver como.
currentColor
É uma palavra-chave que pode ser adicionada na propriedade CSS color. Basicamente ela irá refletir a cor definida na propriedade “color” no elemento em que ela se encontra:
Isso mesmo a cor peru é uma cor válida CSS, mas o importante aqui é que não precisamos repetir o valor da nossa cor para a propriedade na borda simplesmente chamamos a palavra-chave e ele passa a útil quando temos elementos que passam por mudança de estado, por exemplo, botões e links:
No exemplo acima um botão, seguindo as mesmas propriedades do parágrafo anterior, entretanto nesse caso estamos a trabalhar com um botão e quando o nosso botão está no estado hover adicionamos a cor “navy”, assim o resultado será o seguinte:
Botão no estado normal
Botão no estado “hover”
Além disso, podemos resgatar o valor do (color) de uma elemento pai como no exemplo abaixo:
Detalhe para o exemplo anterior o botão não conseguiu resgatar o currentColor somente quando a cor é definida no próprio elemento.
Suporte
currentColor ganhou suporte em 2009 pelo navegador Opera e desde então os navegadores passaram a dar suporte a palavra-chave e hoje a propriedade tem suporte em 98.8% dos navegadores.
Na versão 5.6 do WordPress foi adicionado a nova API de blocos Gutenberg ou Block API 2, ele tem como foco tornar a edição de blocos mais leve, reduzindo a quantidade de elementos na árvore de elementos DOM do editor, a versão 2 também trás melhorias para ajudar na customização de blocos em temas e plugins .
Habilitando a API versão 2
Para fazer o uso da nova API, devemos especificar na criação de nosso bloco que iremos trabalhar com a versão 2 da API passando o atributo “apiVersion” dentro da função registerBlockType, exemplo:
registerBlockType( name, { apiVersion: 2 } );
Code language:CSS(css)
useBlockProps
Recentemente gravando o curso de Gutenberg em meu canal notei quando utilizando o script create-block os blocos vinha uma um novo hook react relacionado o useBlockProps.
Esse novo hook adiciona em nosso bloco todos os atributos relacionados e o eventos necessários para um bloco. Agora qualquer propriedade que você deseja passar para o bloco deve ser gerenciado pelo useBlockProps. Assim utilizamos o useBlockProps da seguinte forma:
