Page Lifecycle API and Page Transitions

Hello my dear readers, today you are going to read some sweet about Page Lifecycle API, there's some shadow on this subject since it doesn't even show up on Can I Use.

The Page Lifecycle API is a set of events that occur when a page is loaded, and when it is unloaded.

GitHub Co-Pilot

It is not an API, but on Google Developers Blog there's an extensive post about it, check it about here on Page Lifecycle API, first publiched in mid 2018, last updated on 2020

Let me begin

All the events

load
unload
beforeunload
visibilitychange
resume
freeze
focus
blur
pagehide
pageshow

The bigger picture

Google shares in the post a concern of battery and CPU usage, and the struggle browsers have to improve the performance without breaking websites and user experience

My little picture

I want a dead simple fade-in and fade-out page transition without using SPA.

Harder than it looks

My first step is to listen to all clicks to anchor elements

trexos de códigos
links
listas
imagens
comentários (de quem lê)

Trexos de Código

O uso de destacamento de syntax deixa o código mais amigável de ler

Aqui é usado a lib highlight.js com suporte para HTML, CSS, JavaScript e JSON

Como usar

Use a tag <pre> junto a tag <code>

function drinkWater() {
  console.log('Drinking Water nice');
}

No exemplo acima, repare que a palavra nice aparece como um link, isso acontece pois sempre que houver HTML dentro do elemento <code> é necessario fazer escaping dos caracteres que abrem e fecham a tag do HTML.

& as &
< as <

Fonte Stackoverflow

Veja como fica o mesmo trexo de código com as tags html escaped

function drinkWater() {
  console.log('Drinking Water <a href="#">nice</a>');
}

Trexo de código apenas com HTML

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Posting Guide</title>

Links

Existem três tipos de links

Links em que o atributo href começam com # possuem um estilo diferente para quem lê saber o que está prestes a acontecer

Links para outras páginas dentro do mesmo site devem começar com /, e também possui um estilo especifico deste tipo de link

Sobre links externos, é obrigatório usar rel=noopener com target="blank" para a melhor experiência

Listas

Já foi utilizado neste documento alguns exemplos do uso de UL e OL no HTML

Lista ordenada

Use sempre que precisar inumerar itens, útil para alguém dizer Leia o item 3, por exemplo:

Cenoura
Batata
Laranja

Lista não ordenada

Quando a ordem não é relevante

Beba água todo dia
Durma e acorde nos mesmos horários
Pratique atividade física

Imagens

As imagens precisam ser otimizadas de forma que os reports do lighthouse não diminuam o score da página, sempre use o atributo loading=lazy.

Se necessário use mais de 1 imagem em tamanhos diferentes para cada tamanho de tela e densidade de pixels.

Comentários

Acredito que os comentários é uma ótima sessão social de qualquer website, estou analisando ferramentas e meios para que vc possa comentar algo, tirar dúvidas, avisar que algo está errado, compartilhar alguma informação relevante ou apenas agradecer ao conteúdo.