🔥 ¿Sabías que #HTML tiene una etiqueta especial llamada `template`?

Te sonará si has trabajado con #vuejs. Pero no te preocupes si no la conoces, te lo explico aquÍ abajo.

[ HILO ] ⇣ template tag in html5
La etiqueta `template` de #HTML te permite tener contenido oculto en tu documento HTML. Es como una guarida secreta* para tu contenido.

⚠️ *¹ No lo uses para como sistema seguro para ocultar contenido.
Y... ¿para qué? Tal vez te sirva para mejorar el #rendimiento de tu #web.
El contenido de la etiqueta no se añade a la página hasta que tú se lo indiques. (Sí, con #JavaScript)
Esto significa que el navegador no tiene que descargar y analizar ese contenido cuando la página se carga por primera vez, lo que puede hacer que la página se cargue más rápido.
La etiqueta `template` también puede ser útil si quieres mostrar el mismo contenido en varios lugares de la página, es decir, usarla como plantilla (de ahí el nombre) que puedes clonar.
Este sería un ejemplo básico de como se usa la etiqueta `template` de HTML.

Código HTML ⇣
Y aquí el código JavaScript necesario ⇣
Increíble el párrafo sin cerrar porque se cambió de linea al generar la imagen
Otro ejemplo rápido: quieres agregar una fila a una tabla que ya existe en tu documento.
Creas la plantilla de la fila con la etiqueta `template` y después rellenas dicha plantilla con texto deseado usando JavaScript. Finalmente la añades al DOM. Repite el proceso. 🔁
En RESUMEN:
La etiqueta `template` de #HTML es un sistema para tener contenido oculto cuando se carga una página, que puede ser instanciado posteriormente a través de #JavaScript. Puede ser útil para tener una plantilla que se pueda clonar e insertar en la página.
Muchas gracias por todo tu apoyo. 🙌

Si te gustó este hilo:

1. Like
1. Sigue a @baumannzone
2. RT para compartirlo con tu audiencia
No cierran bien los <p>

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with ⚡️ Baumann.js

⚡️ Baumann.js Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @baumannzone

Nov 22
🤔¿Cómo interrogar a un #código que no es tuyo?

Como #developer, no siempre trabajas con fácil de leer y entender desde el primer momento.

🔧 Por eso te traigo 10 TRUCOS que puedes usar para interrogar el código desconocido.

[ HILO ] ↓
1. Instala plugins. Suena obvio, pero tal vez no estés exprimiendo al máximo tu editor de código.

✅ Instala cosas como: Resaltado de sintaxis, auto formateo, refactoring, navegación contextual (ver implementación, ver referencia, etc), test-runners, ...
2. Lee el código al menos dos veces.

A la pimera casi nunca es suficiente para entender completamente lo que hace un trozo de código. Dos debería ser el mínimo.
🦆 Si tienes un patito de goma, es el momento de empezar a hablar con él.
Read 18 tweets
Oct 19
⌚ “El tiempo es ORO”, sobre todo en el entorno laboral.

Por eso hoy te traigo 1️⃣0️⃣ CONSEJOS útiles para que tu equipo haga una gestión eficaz del tiempo

[ H I L O ] 👇
✅ La gestión del tiempo es el proceso de administrar la cantidad de tiempo dedicada a distintas actividades.

✅ Una buena administración del tiempo hace que los equipos estén satisfechos.
- Establece objetivos inteligentes.
- Prioriza los objetivos de forma sensata.
- Desglosa los objetivos en tareas realizables.
- Trabaja en las cosas más importantes primero.
- Aprende a decir que NO (reconoce tus límites).
Read 6 tweets
Sep 15
5️⃣ TRUCOS de Google (no solo para #developers) que (tal vez) no conocías.

[ H I L O ] 👇
1 / Buscar por imagen

Sube o pega la url de una imagen y busca ✨
2 / Color Picker

Selector y conversor de colores 🟥🟧🟨🟩🟦🟪
Read 7 tweets
Aug 30
✅ CSS nunca había sido tan divertido.

😱 Hoy te traigo +10 KITs #retro de #CSS que no sabías que existían para revivir tus mejores momentos de la infancia 🍭

【 H I L O 】👇
1 • NES.css

Framework CSS estilo NES 🕹
nostalgic-css.github.io/NES.css
2 • RPG UI

Para los más jugones 🗡
github.com/RonenNess/RPGUI
Read 18 tweets
Aug 9
😵 ¿Quieres hacer tu primera PR #OpenSource pero no sabes por dónde empezar? Entonces esto te interesa

Tu primera contribución al código abierto puede ser muy difícil si no sabes cómo.

Te muestro un sistema que te ayudará con esto.
⟪ H I L O ⟫ ↓
Tanto si quieres mejorar como developer y aprender de los grandes proyectos, como si quieres contribuir por gusto, aportar al mundo #Open #Source te puede beneficiar. Incluso, ¡te puede ayudar con tu primer empleo!
Conoce "Good First Issue", un sistema que selecciona las ´issues fáciles´ de proyectos populares #OpenSource y te ayuda a hacer tu primera contribución al código abierto.

goodfirstissue.dev
Read 6 tweets
Jul 28
Los diseñadores y/o developers enfurecen cada vez que necesitan usar imágenes de stock en sus proyectos.

Por eso, te traigo 8 sitios web GRATUITOS de fotos de stock que (tal vez) no conocías.

⎨ H I L O ⎬ 👇
Read 11 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(