Un buen desarrollador web, entre muchas otras cosas, es quien prepara su código para todas las posibilidades en un proyecto; no es necesariamente quien hace un proyecto sin errores, sino quien programa una respuesta adecuada en caso de que estos ocurran. En este post, te enseñaremos cómo crear HTML fallback para una petición sin contenido, una respuesta fundamental para la experiencia de usuario.
¿Qué es HTML fallback?
Cuando hablamos de un HTML fallback nos referimos a un diseño básico con elementos web que se le presenta al usuario en caso de error. Por esto se llama fallback, pues es un diseño en el que nos podemos “caer” en caso de que haya problemas con nuestro diseño original. En este sentido, fallback es una forma de decir que algo es un plan B.
De manera particular, un HTML fallback para una petición sin contenido se refiere a un diseño en el que demostramos que la petición HTTP hecha no ha devuelto contenido. No es un aviso de error en la petición, sino un mensaje que demuestra que todavía no hay contenido en la página web. Esto suele suceder cuando un usuario todavía no ha creado contenido o cuando nuestra aplicación es muy nueva.
A continuación, te enseñaremos cómo crear un HTML fallback para una petición sin contenido.
¿Cómo crear un HTML fallback para una petición sin contenido?
Para crear un HTML fallback para una petición sin contenido debemos, primero, determinar qué pieza se encarga de realizar esta petición. De este modo, podremos programar una lógica dentro de esta pieza para que, en caso de que no haya contenido, se muestre la página HTML que determinemos.
Entonces, para crear un HTML fallback para una petición sin contenido, usaremos el condicional if. Dentro de este condicional, determinaremos qué código se debe ejecutar en caso de que no haya contenido en la petición.
Para declarar que no hay contenido en la petición y que esta es la situación condicional, usaremos la propiedad .length del array resultante de la petición. Este array, en nuestro caso, está guardado dentro de la variable content. A continuación, te mostramos cómo escribimos este condicional:
if (content.length === 0) {
}
Ahora, el siguiente paso para crear un HTML fallback para una petición sin contenido es determinar que, bajo este condicional, pintaremos un HTML fallback. Para este paso, seleccionamos el div en el que normalmente se pintaría el contenido (en nuestro caso guardado bajo la variable contentListElement) y luego le aplicamos la propiedad innerHTML, que nos permite insertar un contenido dentro del elemento.
if (content.length === 0) {
this.contentListElement.innerHTML =
}
Ahora, igualaremos la propiedad anterior a una función que nos devuelva un string template con el HTML que queremos mostrar como resultado. A continuación, te mostramos esta función:
export function buildNotFoundContentView ( ) {
return `
<h1> Ooops!! No hay ningún contenido </h1>
<p> Se el primero en crear </p>
`;
}
Ten en cuenta que un string template es un tipo de elemento que podemos crear desde un archivo JavaScript usando el signo de backtick. Para conocer más sobre este elemento, te invitamos a leer el artículo sobre plantillas literales en la página de la Mozilla Developer Network.
Entonces, el último paso para crear un HTML fallback para una petición sin contenido es pasar este método como HTML en nuestro condicional anterior.
if (content.length === 0) {
this.contentListElement.innerHTML = buildNotFoundContentView ( );
}
Con las líneas de código anteriores, hemos logrado determinar una condición y reaccionar a ella usando una función creada por nosotros. Ten presente que, si creas esta función en una pieza distinta a donde has declarado la condición, deberás importarla al inicio de tu código o, incluso, pasar la otra pieza al constructor de tu pieza actual (si es que estás manejando un proyecto con clases e instancias en JavaScript).
¿Quieres seguir aprendiendo?
Ahora que sabes qué es y cómo crear un HTML fallback para una petición sin contenido, estás más cerca de ser un experto en desarrollo web. Para seguir aprendiendo sobre este poderoso y creciente mundo, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva en el que aprenderás todas sus herramientas, patrones, lenguajes y conceptos fundamentales. ¿Quieres seguir aprendiendo para convertirte en todo un profesional en poco tiempo? ¡Inscríbete ya!
