Saludos. Aquí hay una traducción del artículo "Eliminación despiadada del cambio de diseño en Netlify.com" publicado el 25 de noviembre de 2020 por el autor Zach Leatherman.
En el sitio web de Netlify, tenemos un pequeño banner que aparece en la parte superior para dirigir el tráfico hacia cosas nuevas e interesantes que suceden en el mundo de Netlify.
Este banner tiene dos partes:
Una característica HTML avanzada que solo los desarrolladores de la vieja escuela conocen: hipervínculo.
( )
, :
. ⚠️⚠️⚠️ . 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);
, -, .
Y dado que insertamos el script de re-vistas <head>
cuando el usuario oculta el banner y navega a una nueva página, el banner también se ocultará antes del primer renderizado.
¡Bastante bueno para cambios tan pequeños!
El próximo objetivo será mejorar la visualización de las fuentes web.