DEV Community: Félix Moreno

2- Alpine.js: Mostrar u ocultar contenido

Félix Moreno — Mon, 20 Jan 2025 17:54:37 +0000

Alpine.js es una librería JavaScript liviana y poderosa que permite agregar interactividad a nuestras páginas web de manera simple y efectiva.
En este artículo, vamos a utilizar Alpine.js para mostrar y ocultar elementos.

Ejemplo:

A continuación veremos un ejemplo que demuestra cómo usar Alpine.js para mostrar y ocultar un elemento:


<!DOCTYPE html>
<html lang="en">
<head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div x-data="{ isOpen: true }">
        <button x-on:click="isOpen = !isOpen">Mostrar/Dejar de Mostrar</button>
        <h1 x-show="isOpen">Página de Inicio</h1>
    </div>
</body>
</html>

Explicación del código:

x-data:
La directiva x-data inicializa un objeto Reactivo en Alpine.js. En este caso, declaramos isOpen con un valor inicial de true.

<div x-data="{ isOpen: true }">

Botón con x-on:click:
La directiva x-on:click escucha el evento de clic en el botón y alterna el valor de isOpen entre true y false.

<button x-on:click="isOpen = !isOpen">Mostrar/Dejar de Mostrar</button>

Elemento con x-show:
La directiva x-show controla la visión del elemento según el valor de isOpen. Si es true, el elemento se muestra; si es false, el elemento se oculta.

<h1 x-show="isOpen">Página de Inicio</h1>

Resultado:

Al cargar la página en el navegador, debe verse lo siguiente:

Al dar clic en el botón, se dejará de ver el elemento con el texto Página de Inicio, así:

1- Alpine.js ¿Cómo instalar?

Félix Moreno — Mon, 20 Jan 2025 17:21:35 +0000

La manera más sencilla de instalar Alpine.js es agregando el script siguiente:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

Ejemplo:

Creamos un documento llamado index.html, y agregamos el siguiente código

<!DOCTYPE html>
<html lang="en">
<head>

    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Referencias:

Alpine.js - Documentación

Hola Mundo en Rust

Félix Moreno — Sun, 11 Apr 2021 15:28:39 +0000

¿Qué es Rust?

De acuerdo con el sitio web de Rust, se trata de "un lenguaje que empodera a todos para construir software fiable y eficiente." Es un lenguaje multi-paradigma, estructurado, concurrente e imperativo, diseñado en el Centro de Investigación de Mozilla, por Graydon Hoare con contribuciones de Brendan Eich, y otros desarrolladores, en el año 2010. Actualmente el proyecto es Open Source.

¿Para qué se utiliza?

Para la programación de sistemas, tales como motores de navegación, kernels de sistemas operativos, y herramientas de líneas de comandos. También se emplea para el desarrolllo de aplicaciones web, con frameworks tales como Actix Web y Rocket.

¿Qué ventajas tiene desarrollar en Rust?

Rust es un lenguaje estáticamente tipado, lo cual permite que se detecten errores (bugs) en el momento en que se está compilando.
Ofrece mayor seguridad de memoria y rapidez. Rust permite indicar de qué manera se deben colocar los valores en memoria y cómo se deben gestionar los mismos.

Tu primer programa en Rust: Hola Mundo

Paso 1:

Instala Rust. Da clic aquí para ver instrucciones

Paso 2:

Crea un archivo con el nombre de tu preferencia y la extensión .rs, para este ejemplo utilizaremos hola_mundo.rs.
En nuestro caso, vamos a crear dicho archivo en el escritorio

Paso 3:

Coloca el siguiente código en el archivo:

fn main() {
          println!("¡Hola, mundo de Rust!");
          }

Todo programa en Rust debe tener una función fn main(), como punto de entrada al programa. Si no la colocamos, el programa no podrá saber en dónde tiene que comenzar a ejecutarse.

Paso 4: Ejecutar el programa

Vamos ahora a ejecutar nuestro programa. Para ello, vamos a nuestra terminal (en Mac) o a la línea de comandos (en Windows). Como en nuestro ejemplo creamos el archivo en el escritorio (Desktop), tenemos que dirigirnos a la carpeta Escritorio (Desktop) para ejecutar el programa; para ello, escribamos cd desktoppara posicionarnos en la ruta de dicho archivo.

Ahora, llamemos al compilador, escribiendo lo siguiente en nuestra terminal o línea de comandos: rust c hello_world

Acabamos de compilar el programa. Para ejecutarlo, escribamos en nuestra terminal o línea de comando lo siguiente .\hello_world.exe. Veremos que se despliega el mensaje ¡Hola, mundo de Rust! en nuestra consola.

¿Deseas aprender más sobre Rust?

En el sitio web de Rust podrás encontrar varios recursos de aprendizaje sumamente útiles, en español. Da clic aquí para ver los recursos de aprendizaje.

¿Deseas asistir a algún evento de Rust?

Da clic en el enlace siguiente: Calendario de Eventos de Rust (en Google Calendars)

¿Deseas contribuir con código?

Da clic en el enlace siguiente, para leer la Guía de contribución

DEV Community: Félix Moreno

2- Alpine.js: Mostrar u ocultar contenido

Ejemplo:

Explicación del código:

Resultado:

1- Alpine.js ¿Cómo instalar?

Ejemplo:

Referencias:

Hola Mundo en Rust

¿Qué es Rust?

¿Para qué se utiliza?

¿Qué ventajas tiene desarrollar en Rust?

Tu primer programa en Rust: Hola Mundo

Paso 1:

Paso 2:

Paso 3:

Paso 4: Ejecutar el programa

¿Deseas aprender más sobre Rust?

¿Deseas asistir a algún evento de Rust?

¿Deseas contribuir con código?

Más recursos útiles:

Fuentes: