Clever Geek Handbook

EliminaĆ§Ć£o implacĆ”vel de Layout Shift em netlify.com

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:





  1. HTML, : .





  2. ( )





, :





  1. . āš ļøāš ļøāš ļø . JavaScript JavaScript .





  2. JavaScript localStorage



    , , . - URL- , , . - .





  3. , . , HTML ().





2 3 . 1 2 ~600 .





(, ) 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);

, -, .





, ! , JavaScript .





, Layout Shift .





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.







More articles:


All Articles