Nos posts anteriores falei sobre o novo plugin de web stories para WordPress ness post vamos falar das novidades na versão 1.1 do plugin:
Suporte a inclusão de gifs
Legendas para vídeos
Inclusão de templates para textos
Um gif pode valer mais que mil palavras
Inclusão de gifs em stories é algo ajuda na parte editorial trazendo animações que trazem referências para um grupo específico ou assunto. O recurso já utilizado em outras plataformas e agora temos suporte a inclusão de gifs no Web Stories para WordPress através da plataforma Tenor. Da mesma forma que temos acesso a galeria do unsplash agora temos a inclusão da biblioteca de gifs do Tenor.
Novo painel de inclusão de gifs
Legendas
Legendas é um item essencial para acessibilidade e SEO, Agora temos a opção de adicionar legendas em nossos vídeos com o plugin. Outro fator importante de legenda muitas vezes usuários mobile assistem nosso vídeo sem áudio, em transporte público ou momentos onde não se pode reproduzir vídeos com áudio para esses casos a legenda tem um papel importante.
O formato suportado pelo web stories é o WebVTT, formato suportado por diversos players e padrão da web que possui o seguinte formato:
WEBVTT-WebCoreVitals
00:00.000--> 00:03.005Owebcorevitals é umanovamétricasque
00:03.000--> 00:05.995vaiaifazerpartedoranqueamentodabuscadoGoogle
00:06.039--> 00:08.529Eelavaiterofoconaexperiênciadousuário
Code language:CSS(css)
O documento precisa começar com WEBVTT em seguida o título do vídeo(opcional) e os blocos sempre seguidos por um espaço. Cada bloco possui uma linha com o tempo e a segunda linha a legenda para aquele espaço de tempo.
WebVTT aceita propriedades como alinhamento e tamanho de fonte mas não vamos entrar nesses detalhes caso não queira tratar com esses ítens na web você vai encontrar alguns editores visuais para legenda como o VTT Creator:
Uma vez que criamos a legenda para o nosso vídeos adicionamos via painel lateral quando selecionamos o nosso vídeo:
Editor visual com vídeo selecionado
Templates para textos
Por último mais não menos importante temos a inclusão de templates para textos, funcionalidade que irá ajudar na parte gráfica a produção de stories. Nas primeiras versões tinhas templates para stories nesse caso temos combinações de textos e títulos que irão ajudar a harmonizar o seu conteúdo.
Novo painel de templates de textos
Se já está utilizando o plugin de stories para WordPress diga o que você está achando do plugin nos comentários. Para mais posts sobre WordPress acesse a página da categoria.
Lazy Loading ou Carregamento tardio para imagens e vídeos é um recurso onde você prioriza o carregamento dos itens visíveis na tela do usuário. O resultado dessa ação melhora o tempo de carregamento para a área visível do usuário e o carregamento de recursos somente quando necessário super relevante para usuários mobile.
Esse Recurso foi introduzido pelo internet Explorer 11 mas nenhum browser implementou o recurso nessa época. Em 2019 o Chrome voltou a colocar o recurso em pauta na versão 76. Atualmente o recurso está disponível para Edge, Firefox, Chrome, Opera e Android Browser. Já no Safari recurso está disponível em formato de teste.
Em Agosto de 2020 o recurso ganhou atenção quando passou a fazer parte do Core do WordPress na versão 5.5. Mas como esse recuso funciona? Nesse posts vamos ver como implementar essa funcionalidade e os requisitos para fazer uso do recurso.
Trabalhando com Lazy-Loading
Para aplicar o lazy-loading em imagens adicionamos o atributo loading na tag img, por exemplo:
<imgloading="lazy"src="minha_foto.jpg" />
Code language:HTML, XML(xml)
O atributo loading pode receber os seguintes valores:
auto: Executará o comportamento padrão do navegador
lazy: A image só será carregada quando o scroll chegar uma distância específica da área visível.
eager: Carrega o recurso imediatamente caso esteja localizado na página.
Além da propriedade loading as imagens precisam ter especificadas suas dimensões largura e altura. Isso porque até carregar as imagens o browser não sabe as dimensões da imagem. Além disso a falta de dimensões podem causar mudanças de layout durante o carregamento também um fator que pode comprometer a experiência do usuário.
A definição das dimensões é uma recomendação já antiga antes mesmo da propriedade loading existir. Com o lazy-loading isso se torna mais relevante sem as dimensões o carregamento fica ainda mais dependente dos browsers.
As tags picture, video e iframe também podem fazer o uso do lazy loading como no exemplo abaixo:
No código anterior temos múltiplas alternativas de carregamento mas o atributo loading só precisa ser definido na tag img.
Carregamento de imagens e sua visualização
A implementação do recurso tenta garantir performance sem afetar a experiência do usuário. Assim o carregamento da imagem irá iniciar quando a imagem atingir uma distância minima da área visível. Mas vale lembrar que o carregamento das imagens ficam dependentes da rede do usuário.
Comparado a algumas bibliotecas de lazy loading a distância implementada pelos browsers que rodam a engine do Chrome são um pouco conservadoras.
Mas no Chrome essa distância não é fixa ele é dependente de alguns fatores:
O tipo da imagem que está sendo carregada
Se o modo econômico tá habilitado
Conexão efetiva do device
Mudanças em 2020
Após a implementação do recurso na versão 76 em Julho de 2020 essa distância foi reduzida baseada nos relatórios recolhidos nos primeiros meses de uso do recurso. Para conexões 4G o primeiro carregamento ficava restrito a uma área de 3000px agora foi reduzido para 1250px. e para conexões lentas de 4000px para 2500px.
Essas medidas reduzem o carregamento médio de imagens em até 40%. O assunto não é muito extenso então vamos ficando por aqui para mais tutoriais acesse a página da categoria tutoriais. Também fiz um vídeo em meu canal onde eu abordo o assunto:
Nesse post vamos falar sobre como estilizar nossos temas Frontity, o framework trabalha com emotion uma biblioteca css que nos ajuda a escrever CSS-in-JS. Essa é a primeira vez eu acho que falamos em CSS-in-JS no blog. Esse post faz parte de uma série sobre Frontity:
Antes de entrar no assunto de estilização com Frontity vamos falar sobre CSS-in-JS é um assunto que tomou o hype a dois anos atrás com Styled Components, emotion e outros frameworks ele permite a escrita de CSS dentro de arquivos JavaScript, assim adicionamos super poderes em nosso estilo, com emotion temos várias formas de escrever CSS-in-JS, como por exemplo:
Como podemos ver utilizando string literals para escrever CSS atualmente os principais editores de texto reconhecem essa sintaxe, por exemplo, VS Code. Para simples mas temos uma série de conceitos que podemos ver nesse código e também parte de compilação.
nesting: algo comum com LESS e SASS é o uso de nesting onde podemos agrupar seletores.
CSS + Javascript: podemos definir regras e concatenar variáveis como JavaScript.
Compilação: muita gente pensa que CSS-in-JS é inline CSS mas esse código é compilado gerado uma style tag para esse elemento, como podemos ver o código a seguir:
CSS modular: temos a possibilidade de criar um CSS modular criando seletores únicos dinamicamente e só carregando o CSS quando necessário.
Cross-browsing: Além disso bibliotecas como styled components e emotion cuidam de fazer todo o trabalho de cross-browsig.
Emotion é a biblioteca adotada por Frontity para trabalhar como ela você não precisa fazer nenhuma instalação uma vez que você instala Frontity já pode fazer uso dos recursos, para isso importamos classes e funções dentro do Frontity.
Nosso projeto
Alguns desses conceitos vamos abordar quando começamos a estilizar nosso tema. Agora vamos voltar para o nosso projeto, para definir o estilo da nossa aplicação vamos utilizar o Starter Theme da Alessandra Stalanto como base:
Demo do Stater Theme
No último post criamos o seguinte componente principal:
import React from'react';
import { connect } from'frontity';
const Theme = ({state}) => {
const data = state.source.get(state.router.link);
return (
<><h1>Nosso Primeiro tema com Frontity</h1><p>URL Atual: {state.router.link}</p><p>Autor: {state.source.author[1].name}</p>
{ data.items.map( item => {
const post = state.source.post[item.id]
return (
<articlekey={post.id}><h2>{post.title.rendered}</h2></article>
)
})
}
</>
);
};
exportdefault connect(Theme);
Code language:JavaScript(javascript)
Estilo Global
Como vimos no exemplo anterior o estilo criado com emotion fica vinculado ao componente criando uma estrutura mais modular. Caso queiramos adicionar um estilo de forma global precisamos adicionar o componente Global esse componente recebe como parâmetro um estilo que será o seguinte:
Vamos adicionar esse estilo dentro da pasta tutorial-fellyph > src > styles criamos o arquivo globalStyles.js. Um ponto importante desse código que importamos uma função css ela nos ajudará a manipular o conteúdo como CSS e não uma simples string literal. Agora o próximo passo será adicionar nosso estilo global.
O arquivo global tem algumas regras básicas. Podemos criar algo um pouco mais complexo para utilizar o Componente Global para adicionar nossas fontes, para isso vamos criar um arquivo fontFace.js dentro da mesma pasta que globalStyles:
Como podemos ver o component FontFace por se só acessa diretamente o componente Global, além carregar as fontes que iremos trabalhar baumas e khand mas para vincular as fontes precisamos adicionar em nosso componente principal.
Antes de mostrar o Theme componente vamos mover a estrutura de nosso post para um componente Post:
No post anterior sobre Frontity vimos como criar o nosso primeiro projeto agora vamos com criar nosso primeiro tema totalmente customizado, caso não conheça o frontity confira o post que fiz uma introdução sobre o framework react. Para esse tutorial o primeiro passo é ir na pasta de nosso projeto e criar um novo pacote para nosso tema executando o seguinte comando em nosso terminal:
npx frontity create-package [nome-do-pacote]
Code language:JavaScript(javascript)
O comando irá criar uma pasta com o nome do pacote que especificamos dentro da pasta packages, lá iremos armazenar todos os pacotes locais responsáveis pela funcionalidades e exibição do conteúdo o nosso site. Em outras palavras podemos chamar do tema de nossa aplicação se olharmos para o Frontity como uma aplicação wp.
Para o nosso projeto irei criar o pacote tutorial-fellyph o código será o seguinte:
npx frontity create-package tutorial-fellyph
O comando irá criar a seguinte estrutura dentro da pasta packages:
Nosso ambiente de teste rodando o tema que acabamos de criar
Agora que temos nosso tema rodando e para alterar o conteúdo podemos alterar o componente Root dentro de nosso index.js. Mas para esse tutorial vamos mover e substituir nosso componente Root para um arquivo separado, nesse caso dentro da pasta tutorial-fellyph/src vamos criar uma pasta components lá iremos criar um arquivo chamado index.js, ele será responsável pelo esqueleto principal de nosso projeto, esse arquivo pode ter qualquer nome mas vamos seguir uma conversão para nos ajudar no futuro.
Agora movendo o código para o arquivo src/components/index.js o nosso código ficará da seguinte forma:
import React from'react';
const Theme = () => {
return (
<h1>Nosso Primeiro tema com Frontity</h1>
);
};
exportdefault Theme;
Code language:JavaScript(javascript)
Modifiquei o nome do componente de Root para Theme e alterei o conteúdo para um h1. Já o src/index.js da seguinte forma:
Agora conectamos os dois items, importando e adicionando o componente Theme a propriedade roots.
Lendo informações do WordPress
Até então ainda não lemos nenhuma informação de nossa aplicação WordPress, quando configuramos o nosso projeto dentro da lista de pacotes temos a configuração de wp-source ele será responsável por adicionar os dados do WordPress em nosso estado, se você trabalha com React o conceito estado é algo comum, caso contrário você pode conferir a documentação do react:
Como podemos ver atribuímos a fonte de nosso conteúdo no estado de nossa aplicação com isso a vantagem de trabalhar com frontiy é que ele irá cuidar de fazer a configuração e filtros em diferentes requisições de conteúdo.
O pacote wp-source possui uma série de funcionalidades onde podemos abordar em mais detalhes no futuro. Mas já com as configurações atuais, podemos acessar esses dados e inspecionar via console no Chrome devTools ou qualquer browser moderno:
Quando inspecionamos frontity.state temos o resultado acima
Como podemos ver o state retorna um Objeto do tipo Proxy, ele permite criar uma um proxy para um outro objeto com operações fundamentais nele temos dois parâmetros:
target: O objeto que contém os dados.
handler: As possíveis operações que conseguimos realizar sobre objeto target.
Dentro de target temos 4 valores:
frontity: configurações do nosso projeto como url principal e nome do projeto
router: ferramenta de controle de rotas do frontity
source: os dados vindos da consulta do wp-source
tutorial-fellyph: dados a referente ao nosso tema
Agora vamos ler algumas informações em nosso arquivo principal Theme para isso precisamos conectar nosso vamos utilizar o método connect do Frontity da seguinte forma:
import React from'react';
import { connect } from'frontity';
const Theme = ({state}) => {
return (
<><h1>Nosso Primeiro tema com Frontity</h1><p>URL Atual: {state.router.link}</p><p>Autor: {state.source.author[1].name}</p></>
);
};
exportdefault connect(Theme);
Code language:JavaScript(javascript)
Assim temos o seguinte resultado:
Carregamos a url atual e o nome do autor
Para acessar os dados de forma mais elegante podemos vamos utilizar dois métodos get para quando temos os dados disponíveis em nosso estado and fetch quando queremos fazer uma requisição http a essa informação. Esses métodos estão disponíveis tanto em nosso router quando em nosso wp-source.
Por exemplo, podemos acessar nosso source e utilizar o método “get” para acessar as informações da página atual da seguinte forma e na sequência acessa a lista de post relacionados:
import React from'react';
import { connect } from'frontity';
const Theme = ({state}) => {
const data = state.source.get(state.router.link);
return (
<><h1>Nosso Primeiro tema com Frontity</h1><p>URL Atual: {state.router.link}</p><p>Autor: {state.source.author[1].name}</p>
{ data.items.map( item => {
const post = state.source.post[item.id]
return (
<articlekey={post.id}><h2>{post.title.rendered}</h2></article>
)
})
}
</>
);
};
exportdefault connect(Theme);
Code language:JavaScript(javascript)
Com o código acima acessamos os dados do post e realizamos um loop utilizando a função map para acessar item a item assim acessamos os dados do post com state.source.post[item.id] e na sequência retornamos uma article com o título do post.
Dentro do objeto post conseguimos acessar uma série dados como:
categories
date
excerpt
id
link
status
sticky
tags
title
type
Entre outras informações, o resultado visual é bem simples pois não estamos utilizando nenhum estilo até o momento:
Listagem de posts utilizando frontity
Agora temos o nosso primeiro tema com Frontity exibindo uma listagem de posts na home. Vamos finalizando esse post por aqui mas teremos uma continuação com mais customizações em nosso tema.
Um editor de texto para codificar o nosso tema no meu caso irei utilizar o vs code
Ter uma aplicação WordPress para conectar com sua aplicação Frontity
Agora com tudo pronto precisamos abrir o nosso terminal na página que queremos criar o nosso projeto e rodar o seguinte comando:
npx frontity create frontity-tutorial
Esse comando irá criar um projeto dentro da pasta frontity-tutorial nesse caso podemos utilizar qualquer nome para o nosso projeto. O processo de instalação utiliza npx, mas caso não conheça ele tem o comportamento similar ao npm mas com uma diferença ele irá. Remover os pacotes uma vez que executados. Caso queira saber mais sobre o recurso acesse este artigo.
Terminal rodando o script para criar um projeto frontity
Quando executado o comando as o recurso irá rodar um passo-a-passo, com duas perguntas a primeira qual será o tema inicial Mars theme ou Twenty Twenty e a segunda pergunta caso queira se inscrever na newsletter do Frontity. Uma vez criado podemos entrar na pasta que criamos e rodar a nossa a aplicação em modo desenvolvimento:
cd frontity-tutorial && npx frontity dev
Agora acessando a pasta frontity-tutorial temos a seguinte estrutura:
Uma vez que rodamos frontity em modo desenvolvimento teremos nossa aplicação rodando no endereço localhost:3000
Tema mars rodando no localhost
Como podemos ver a nossa aplicação está lendo posts de uma aplicação WordPress, mas precisamos adicionar a nossa própria aplicação, caso esteja rodando uma aplicação local você também pode apontar para ela. Mas no meu teste eu vou utilizar o meu blog pessoal e para isso precisamos alterar as configurações do nosso projeto no arquivo frontity.settings.js que contém o seguinte código
Como podemos temos inicialmente algumas configurações do nosso projeto e na parte final temos um endereço guardado na propriedade API esse é um blog de test do frontity para o meu test irei substituir o endereço test.frontity.org por blog.fellyph.com.br assim teremos o seguinte resultado:
Tema inicial apontado para meu blog
Como podemos ver minha aplicação frontity passou a carregar os posts do meu blog pessoal mas o header ainda continua com o conteúdo antigo. Nesse caso essa informação é controlada pelo nosso arquivo de configuração nas propriedades título, descrição e os links pela propriedade menu, assim com a atualização o nosso arquivo ficará o seguinte:
Se você navegar pela a aplicação verá que todos os posts páginas de categorias serão renderizados. Agora o próximo passo caso queira alterar o tema padrão você irá precisar ir na pasta packages/mars-theme/ para entender mais sobre acesse a documentação do tema.
Mas para essa série de posts vamos criar o nosso tema do zero e entender os conceitos por trás do Frontity mas isso eu irei deixar guardado para o próximo post. Para ler mais posts sobre WordPress acesse a página da categoria WordPress.