Saudações. Aqui está uma tradução do artigo "Eliminando Ruthlessly Layout Shift On Netlify.com" publicado em 25 de novembro de 2020 pelo autor Zach Leatherman.
No site da Netlify, temos um pequeno banner que aparece na parte superior para direcionar o tráfego para coisas novas e interessantes que acontecem no mundo da Netlify.
Este banner tem duas partes:
HTML, : .
( )
, :
. ⚠️⚠️⚠️ . JavaScript JavaScript .
JavaScript
localStorage
, , . - URL- , , . - .
, . , HTML ().
(, ) JavaScript 2 3 <body>
, :
? . . JavaScript , .
1, . JavaScript JavaScript .
JavaScript- : , , - .
Update: GitHub .
HTML CSS
opacity
, , JavaScript.
.banner--hide announcement-banner,
announcement-banner[hidden] {
display: none;
}
[data-banner-close] {
opacity: 0;
pointer-events: none;
}
.banner--show-close [data-banner-close] {
opacity: 1;
pointer-events: auto;
}
<announcement-banner>
<a href="https://www.netlify.com/sustainability/">Read about our Sustainability</a>
<button type="button" data-banner-close>Close</button>
</announcement-banner>
JavaScript
banner-helper.js
, <head>
:
// CTA , JSON
let ctaUrl = "https://www.netlify.com/sustainability/";
let savedCtaUrl = localStorage.getItem("banner--cta-url");
if(savedCtaUrl === ctaUrl) {
document.documentElement.classList.add("banner--hide");
}
banner.js
, ( - ):
class Banner extends HTMLElement {
connectedCallback() {
// , , ,
// -
// .
this.classList.add("banner--show-close");
let button = this.getButton();
if(button) {
button.addEventListener("click", () => {
this.savePreference();
this.close();
});
}
}
getButton() {
return this.querySelector("[data-banner-close]");
}
savePreference() {
let cta = this.querySelector("a[href]");
if(cta) {
let ctaUrl = cta.getAttribute("href");
localStorage.setItem("banner--cta-url", ctaUrl);
}
}
close() {
this.setAttribute("hidden", true);
}
}
window.customElements.define("announcement-banner", Banner);
, -, .
E como inserimos o script de revisão <head>
quando o usuário oculta o banner e navega para uma nova página, o banner também será ocultado antes da primeira renderização.
Muito bom para essas pequenas mudanças!
O próximo objetivo será melhorar a exibição de fontes da web.