DEV Community: URIAN VIERA

🚀 Nextjs Toast Notify: The Ultimate Notification Library for Modern Web Apps

URIAN VIERA — Mon, 06 Oct 2025 13:47:06 +0000

Welcome to Nextjs Toast Notify, the modern, lightweight, and highly customizable NPM package that revolutionizes how you handle notifications in your web applications! Whether you're building with Next.js, React, Vue, Svelte, or plain JavaScript, this library makes it effortless to add sleek, responsive toast notifications with just one line of code. Say goodbye to clunky alerts and hello to a polished user experience! 🎉

✨ Why Choose Nextjs Toast Notify?

Ultra-Lightweight: Zero dependencies, minified for performance, and no bundle bloat.
Incredibly Simple: Integrate in minutes with a clean, intuitive API.
Fully Customizable: Control positions, animations, durations, icons (SVGs, emojis), progress bars, and sounds to match your app's style.
Modern & Responsive: Out-of-the-box gorgeous designs, perfect for any theme (including dark mode).
Versatile: Supports success, error, warning, and info toasts for all your notification needs.
Framework-Friendly: Works seamlessly with Next.js, React, Vue, Svelte, or vanilla JS.

Compared to heavier alternatives like react-toastify or sonner, Nextjs Toast Notify is lean, fast, and developer-friendly. It's MIT-licensed and actively maintained for reliability.

📦 Installation

Get started in seconds:

Via NPM (Recommended for Next.js/React)

npm install nextjs-toast-notify --save

yarn add nextjs-toast-notify

Via CDN (For Vanilla JS)

<script src="https://unpkg.com/nextjs-toast-notify@1.54.0/dist/nextjs-toast-notify.min.js"></script>

🚀 Quick Start

React/Next.js Example

Add a success toast with a progress bar and custom icon:

import { showToast } from "nextjs-toast-notify";

function MyComponent() {
  const handleClick = () => {
    showToast.success("Operation complete! 🎉", {
      duration: 4000, // 4 seconds
      position: "top-right",
      transition: "bounceIn",
      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>',
      sound: true,
      progress: true
    });
  };

  return <button onClick={handleClick}>Show Toast</button>;
}

export default MyComponent;

Vanilla JS Example (CDN)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Toast Notify Demo</title>
</head>
<body>
  <button id="btn-toast">Show Toast</button>
  <script src="https://unpkg.com/nextjs-toast-notify@1.54.0/dist/nextjs-toast-notify.min.js"></script>
  <script>
    document.getElementById("btn-toast").addEventListener("click", () => {
      showToast.success("Hello JavaScript Devs! 🚀", {
        duration: 5000,
        position: "top-right",
        transition: "topBounce",
        icon: "🚀",
        sound: true
      });
    });
  </script>
</body>
</html>

🎨 Customization Options

Tailor toasts to your needs:

Types: success, error, warning, info
Positions: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right
Animations: bounceIn, slideIn, fadeIn, topBounce, and more
Features: Custom icons (SVG, emojis), progress bars, sound effects, manual close, adjustable duration
Styling: Override CSS with .nextjs-toast-notify__container or per-toast styles

🌐 Resources

🚀 Nextjs Toast Notify: La Librería Definitiva para Notificaciones en Apps Web Modernas

URIAN VIERA — Fri, 24 Jan 2025 03:08:18 +0000

¡Bienvenidos a Nextjs Toast Notify, el paquete NPM moderno, ligero y altamente personalizable que transforma la manera en que gestionas notificaciones en tus aplicaciones web! Ya sea que estés desarrollando con Next.js, React, Vue, Svelte o JavaScript puro, esta librería te permite agregar notificaciones emergentes (toasts) elegantes y responsivas con solo una línea de código. ¡Di adiós a las alertas pesadas y hola a una experiencia de usuario impecable! 🎉

✨ ¿Por Qué Elegir Nextjs Toast Notify?

Ultra Ligero: Sin dependencias, minificado para máximo rendimiento y sin inflar tu proyecto.
Increíblemente Simple: Intégralo en minutos con una API clara e intuitiva.
Totalmente Personalizable: Controla posiciones, animaciones, duraciones, íconos (SVGs, emojis), barras de progreso y sonidos para adaptarlo al estilo de tu app.
Moderno y Responsivo: Diseños atractivos listos para usar, perfectos para cualquier tema (incluido modo oscuro).
Versátil: Soporta toasts de éxito, error, advertencia e información para todas tus necesidades de notificación.
Compatible con Frameworks: Funciona perfectamente con Next.js, React, Vue, Svelte o JavaScript puro.

Comparado con alternativas más pesadas como react-toastify o sonner, Nextjs Toast Notify es ligero, rápido y amigable para desarrolladores. Está licenciado bajo MIT y se mantiene activamente para garantizar fiabilidad.

📦 Instalación

¡Empieza en segundos!

Vía NPM (Recomendado para Next.js/React)

npm install nextjs-toast-notify --save

yarn add nextjs-toast-notify

Vía CDN (Para JavaScript Puro)

<script src="https://unpkg.com/nextjs-toast-notify@1.54.0/dist/nextjs-toast-notify.min.js"></script>

🚀 Inicio Rápido

Ejemplo en React/Next.js

Añade un toast de éxito con barra de progreso e ícono personalizado:

import { showToast } from "nextjs-toast-notify";

function MiComponente() {
  const handleClick = () => {
    showToast.success("¡Operación completada! 🎉", {
      duration: 4000, // 4 segundos
      position: "top-right",
      transition: "bounceIn",
      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>',
      sound: true,
      progress: true
    });
  };

  return <button onClick={handleClick}>Mostrar Toast</button>;
}

export default MiComponente;

Ejemplo en JavaScript Puro (CDN)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo de Toast Notify</title>
</head>
<body>
  <button id="btn-toast">Mostrar Toast</button>
  <script src="https://unpkg.com/nextjs-toast-notify@1.54.0/dist/nextjs-toast-notify.min.js"></script>
  <script>
    document.getElementById("btn-toast").addEventListener("click", () => {
      showToast.success("¡Hola, Devs de JavaScript! 🚀", {
        duration: 5000,
        position: "top-right",
        transition: "topBounce",
        icon: "🚀",
        sound: true
      });
    });
  </script>
</body>
</html>

🎨 Opciones de Personalización

Adapta los toasts a tus necesidades:

Tipos: success, error, warning, info
Posiciones: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right
Animaciones: bounceIn, slideIn, fadeIn, topBounce, y más
Características: Íconos personalizados (SVG, emojis), barras de progreso, efectos de sonido, cierre manual, duración ajustable
Estilos: Sobrescribe CSS con .nextjs-toast-notify__container o estilos por toast

🌐 Recursos

Todo lo que necesitas saber sobre JavaScript, La Guía completa desde Cero.🥇

URIAN VIERA — Fri, 02 Aug 2024 22:28:23 +0000

Esta es tu guía definitiva para comprender los conceptos fundamentales y avanzados de JavaScript. Desde las nociones básicas hasta los temas más complejos, explorarás una amplia variedad de preguntas y respuestas diseñadas para ayudarte a dominar este poderoso lenguaje de programación. Ya sea que estés comenzando tu viaje en el desarrollo web o buscando ampliar tus conocimientos, esta guía te proporcionará la información necesaria para convertirte en un experto en JavaScript.

1. Variables y Tipos de Datos

Existen siete tipos primitivos de datos:
Números, Un valor numérico se compone de cualquier serie de caracteres numéricos, por ejemplo: 5
Cadenas, Cualquier conjunto de caracteres (letras, números, símbolos, etc.) entre un conjunto de comillas dobles ("), comillas simples (') o comillas simples (`) es una primitiva de string.
Booleanos, La primitiva booleana es un tipo de datos lógico con solo dos valores: true y false
null, La palabra clave null representa una ausencia de valor definida de forma intencional.
undefined, es un valor básico asignado a variables que se acaban de declarar o al valor resultante de una operación que no muestra un valor significativo.
BigInt, Las primitivas BigInt son una agregación relativamente nueva a JavaScript, lo que permite operaciones matemáticas en números fuera del rango permitido por Number
Símbolo, Los símbolos son una primitiva relativamente nueva que se introdujo en ES6. Una primitiva de símbolo representa un valor único que nunca coincide con ningún otro valor, incluidos los de otras primitivas de símbolos

// Declaración de variables
let nombre = "Juan";
const PI = 3.14;

// Tipos de datos
let numero = 10; // Número entero
let decimal = 3.14; // Número decimal
let texto = "Hola Mundo"; // Cadena de texto
let esVerdadero = true; // Booleano
let arreglo = [1, 2, 3, 4]; // Arreglo
let objeto = { nombre: "Juan", edad: 30 }; // Objeto

2. Funciones

La función saludar toma un parámetro nombre y muestra un saludo personalizado en la consola cuando se llama con un nombre específico

// Definición de una función
function saludar(nombre) {
console.log("¡Hola, " + nombre + "!");
}

// Llamada a la función
saludar("Juan"); // Imprime: ¡Hola, Juan!

3. Condicionales

Utilizando la estructura condicional if...else para verificar si una variable edad es mayor o igual a 18. Dependiendo del resultado de la condición, se imprime un mensaje apropiado en la consola.

let edad = 18;
if (edad >= 18) {
    console.log("Eres mayor de edad");
} else {
    console.log("Eres menor de edad");
}

4. Bucle For

cómo usar un bucle for en JavaScript para iterar sobre un array. El bucle recorre cada elemento del array e imprime su valor en la consola.

const array = ['a', 'b', 'c', 'd'];

for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
}

5. Bucle for...in

Ilustrando el uso del bucle for...in en JavaScript para iterar sobre las propiedades de un objeto. En cada iteración, se accede a una propiedad del objeto y se imprime su nombre y valor correspondiente en la consola.

const objeto = { a: 1, b: 2, c: 3 };

for (let propiedad in objeto) {
    console.log(propiedad + ': ' + objeto[propiedad]);
}

6. Bucle while

Usando el bucle while para imprimir los números del 0 al 4 en la consola. El bucle se ejecuta mientras el contador sea menor que 5, incrementando el contador en cada iteración.

let contador = 0;
while (contador < 5) {
    console.log(contador);
    contador++;
}

7. Métodos forEach

Cómo usar el método forEach() en un array en JavaScript para recorrer cada elemento del array y realizar una acción específica, en este caso, imprimir cada fruta en la consola.

let frutas = ["manzana", "banana", "pera"];
frutas.forEach(function(fruta) {
    console.log(fruta);
});

// Añadir un elemento al arreglo
frutas.push("naranja");

// Eliminar el último elemento del arreglo
frutas.pop();

8. Objetos y Métodos de Objetos

la creación de un objeto persona en JavaScript con propiedades como nombre y edad, así como un método saludar() que imprime un saludo personalizado utilizando las propiedades del objeto.

let persona = {
    nombre: "Juan",
    edad: 30,
    saludar: function() {
        console.log("Hola, soy " + this.nombre + " y tengo " + this.edad + " años.");
    }
};

// Acceder a las propiedades y métodos del objeto
console.log(persona.nombre); // Imprime: Juan
persona.saludar(); // Imprime: Hola, soy Juan y tengo 30 años.

9. Métodos de Cadena de Texto

let texto = "Hola Mundo";

// Convertir a mayúsculas
console.log(texto.toUpperCase());
// Imprime: HOLA MUNDO

// Convertir a minúsculas
console.log(texto.toLowerCase());
// Imprime: hola mundo

// Obtener la longitud del texto
console.log(texto.length);
// Imprime: 10

10. Método indexOf()

cómo utilizar el método indexOf() en JavaScript para encontrar la posición de una palabra específica dentro de una cadena de texto. En este caso, se busca la palabra "perro" dentro de la frase "El perro come comida", y se imprime la posición de la palabra encontrada, que es 3.

let frase = "El perro come comida";
// Encontrar la posición de una palabra en la frase
console.log(frase.indexOf("perro"));
// Imprime: 3

11. Método slice()

El método slice() en JavaScript para extraer una parte específica de una cadena de texto. Se especifica el índice inicial (0) y el índice final (10) de la porción que se desea extraer de la cadena "JavaScript es divertido", lo que resulta en la impresión de "JavaScript".

let frase = "JavaScript es divertido";
// Extraer una parte de la cadena
console.log(frase.slice(0, 10));
// Imprime: JavaScript

12. Método replace()

El método replace() en JavaScript para reemplazar una parte específica de una cadena de texto. Se busca la palabra "divertido" en la frase "Aprender es divertido" y se reemplaza por "genial", lo que resulta en la impresión de "Aprender es genial".

let frase = "Aprender es divertido";
// Reemplazar parte de la cadena
console.log(frase.replace("divertido", "genial"));
// Imprime: Aprender es genial

13. Método split()

El método split() en JavaScript para dividir una cadena de texto en un array. La cadena original "manzana,naranja,uva" se divide en tres elementos del array ["manzana", "naranja", "uva"] utilizando la coma como separador.

let lista = "manzana,naranja,uva";
// Dividir una cadena en un arreglo
let frutas = lista.split(",");
console.log(frutas);
// Imprime: ["manzana", "naranja", "uva"]

14. Método join()

El método join() en JavaScript para combinar los elementos de un array en una cadena de texto. Los elementos del array frutas se unen utilizando ", " como separador, lo que resulta en la impresión de la cadena "manzana, naranja, uva".

let frutas = ["manzana", "naranja", "uva"];
// Unir elementos de un arreglo en una cadena
let lista = frutas.join(", ");
console.log(lista);
// Imprime: manzana, naranja, uva

15. Método push()

El método push() en JavaScript para añadir un elemento al final de un array. Se agrega el número 4 al array numeros, lo que resulta en la impresión del nuevo array [1, 2, 3, 4].

let numeros = [1, 2, 3];
// Añadir un elemento al final del arreglo
numeros.push(4);
console.log(numeros);
// Imprime: [1, 2, 3, 4]

16. Método pop()

El método pop() en JavaScript para eliminar el último elemento de un array. Se elimina el número 3 del array numeros, resultando en la impresión del nuevo array [1, 2].

let numeros = [1, 2, 3];
// Eliminar el último elemento del arreglo
numeros.pop();
console.log(numeros);
// Imprime: [1, 2]

17. Método shift()

El método shift() en JavaScript para eliminar el primer elemento de un array. Se elimina el número 1 del array numeros, lo que resulta en la impresión del nuevo array [2, 3].

let numeros = [1, 2, 3];
// Eliminar el primer elemento del arreglo
numeros.shift();
console.log(numeros);
// Imprime: [2, 3]

18. Método unshift()

El método unshift() en JavaScript para añadir un elemento al inicio de un array. Se agrega el número 1 al array numeros, resultando en la impresión del nuevo array [1, 2, 3].

let numeros = [2, 3];
// Añadir un elemento al inicio del arreglo
numeros.unshift(1);
console.log(numeros);
// Imprime: [1, 2, 3]

19. Método includes()

El método includes() en JavaScript para verificar si un elemento está presente en un array. Se verifica si el número 2 está presente en el array numeros, lo que imprime true, y se verifica si el número 4 está presente, lo que imprime false.

let numeros = [1, 2, 3];
// Verificar si un elemento está en el arreglo
console.log(numeros.includes(2)); // Imprime: true
console.log(numeros.includes(4)); // Imprime: false

20. Método sort()

El método sort() en JavaScript para ordenar los elementos de un array alfabéticamente. Se ordenan las frutas en el array frutas, resultando en la impresión del nuevo array ["manzana", "naranja", "uva"].

let frutas = ["naranja", "manzana", "uva"];
// Ordenar elementos de un arreglo
frutas.sort();
console.log(frutas);
// Imprime: ["manzana", "naranja", "uva"]

21. Método reverse()

El método reverse() en JavaScript para invertir el orden de los elementos en un array. Los números en el array numeros se invierten, resultando en la impresión del nuevo array [3, 2, 1].

let numeros = [1, 2, 3];
// Invertir el orden de los elementos en el arreglo
numeros.reverse();
console.log(numeros);
// Imprime: [3, 2, 1]

22. Método map()

El método map() en JavaScript para aplicar una función a cada elemento del array numeros. Se duplica cada número del array original, resultando en la impresión del nuevo array [2, 4, 6].

let numeros = [1, 2, 3];
// Aplicar una función a cada elemento del arreglo
let duplicados = numeros.map(numero => numero * 2);
console.log(duplicados);
// Imprime: [2, 4, 6]

23. Método filter()

El método filter() en JavaScript para filtrar los elementos de un array numeros. Se filtran los números impares del array original, resultando en la impresión del nuevo array [1, 3, 5].

let numeros = [1, 2, 3, 4, 5];
// Filtrar elementos de un arreglo
let impares = numeros.filter(numero => numero % 2 !== 0);
console.log(impares);
// Imprime: [1, 3, 5]

Retornar solo el elemento manzana que existe en el Array
const frutas = ["manzana", "banana", "pera", "uva"];

// Filtrar las ocurrencias de "manzana" en el array de frutas
const manzanas = frutas.filter(fruta => fruta === "manzana");

console.log(manzanas);
// Resultado: ["manzana"]


Para retornar todos los elementos del array excepto "pera"
// Filtrar todas las frutas excepto "pera"
const frutasExceptoPera = frutas.filter(fruta => fruta !== "pera");

console.log(frutasExceptoPera);
// Resultado: ["manzana", "banana", "uva"]

24. Método reduce()

El método reduce() en JavaScript para reducir un array numeros a un único valor. Se suma todos los números del array utilizando la función de reducción, comenzando con un valor inicial de 0, lo que resulta en la impresión del valor total de 15.

let numeros = [1, 2, 3, 4, 5];
// Reducir el arreglo a un único valor
let suma = numeros.reduce((total, numero) => total + numero, 0);
console.log(suma);
// Imprime: 15

25. Método some()

El método some() se utiliza en JavaScript para verificar si al menos un elemento de un array cumple con cierta condición especificada en una función de retorno. Consiste en iterar sobre cada elemento del array y devuelve true si al menos un elemento cumple con la condición, y false si ningún elemento la cumple. Este método es útil cuando se desea verificar si al menos un elemento de un array satisface ciertos criterios sin necesidad de iterar manualmente.

const numeros = [1, 2, 3, 4, 5];

// Verificar si al menos un número es mayor que 3
const resultado = numeros.some(numero => numero > 3);

console.log(resultado);
// Resultado: true, ya que 4 y 5 son mayores que 3

26. Método find()

El método find() se utiliza en JavaScript para encontrar el primer elemento en un array que cumple con cierta condición especificada en una función de retorno. Consiste en iterar sobre cada elemento del array y devuelve el primer elemento que cumple con la condición, o undefined si ningún elemento la cumple. Este método es útil cuando se desea encontrar un elemento específico en un array basado en ciertos criterios.

const numeros = [1, 2, 3, 4, 5];

// Encontrar el primer número mayor que 3
const encontrado = numeros.find(numero => numero > 3);

console.log(encontrado); // Resultado: 4, ya que es el primer número mayor que 3

27. Método every()

El método every() se utiliza en JavaScript para verificar si todos los elementos de un array cumplen con cierta condición especificada en una función de retorno. Consiste en iterar sobre cada elemento del array y devuelve true si todos los elementos cumplen con la condición, o false en caso contrario. Este método es útil cuando se desea verificar si todos los elementos de un array satisfacen ciertos criterios.

const numeros = [1, 2, 3, 4, 5];

// Verificar si todos los números son mayores que 0
const todosMayoresQueCero = numeros.every(numero => numero > 0);

console.log(todosMayoresQueCero); // Resultado: true, ya que todos los números son mayores que 0

28. Método concat()

El método concat() se utiliza para concatenar dos o más arrays en uno nuevo.

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [7, 8, 9];

// Concatenar los tres arrays en uno nuevo
const newArray = array1.concat(array2, array3);

console.log(newArray);
// Resultado: [1, 2, 3, 4, 5, 6, 7, 8, 9]

29. El método toString()

El método toString() devuelve una cadena de caracteres representando el array especificado y sus elementos.

const array1 = [1, 2, 'a', 'HTML'];

console.log(array1.toString());
// Resultado: "1,2,a,HTML"

30. Convertir un número a una cadena

var numero = 123;
var cadena = numero.toString();

console.log(cadena);
// Salida: "123"

31. Convertir una fecha a una cadena

var fecha = new Date();
var cadena = fecha.toString();

console.log(cadena);
// Salida: "Mon Apr 09 2024 20:21:12 GMT-0500 (Colombia Standard Time)"

32. Convertir una función a una cadena

function saludar() {
console.log("¡Hola!");
}

var cadena = saludar.toString();

console.log(cadena);
// Salida: "function saludar() { console.log('¡Hola!'); }"

33. Convertir un objeto a una cadena

var objeto = {
nombre: "Juan",
edad: 25
};

var cadena = objeto.toString();

console.log(cadena); // Salida: "[object Object]"

34. Anular el método toString()

Es posible anular el método toString() en un objeto para proporcionar una representación de cadena personalizada.

var persona = {
nombre: "Juan",
edad: 25,
toString: function() {
    return this.nombre + " (" + this.edad + " años)";
}
};

var cadena = persona.toString();

console.log(cadena);
// Salida: "Juan (25 años)"

35. Método values()

El método values() en JavaScript se usa para obtener un array con los valores de las propiedades enumerables de un objeto. El orden de los valores en el array es el mismo que el orden de las propiedades en el objeto.

const persona = {
    nombre: "Juan",
    edad: 25,
    ciudad: "Bogotá"
};

const valores = Object.values(persona);

console.log(valores);
// Salida: ["Juan", 25, "Bogotá"]

36. Método findIndex()

El método findIndex() en JavaScript se usa para encontrar el índice del primer elemento en un array que cumple con una condición específica. El método devuelve -1 si no se encuentra ningún elemento que cumpla con la condición.

const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const indice = numeros.findIndex(numero => numero % 2 === 0);

console.log(indice);
// Salida: 1

Otro ejemplo del Método findIndex()

const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const indice = numeros.findIndex(numero => numero > 5);
console.log(indice);
// Salida: 5

25. Funciones de Flecha

Sintaxis de las funciones flecha en JavaScript, que proporcionan una forma más concisa de escribir funciones. Se compara una función normal suma() con una función flecha equivalente, ambas realizando la misma operación de suma de dos números a y b.

// Función normal
function suma(a, b) {
    return a + b;
}

// Función flecha
let suma = (a, b) => a + b;

26. Template String

El uso de template strings en JavaScript, que permiten incrustar variables y expresiones dentro de una cadena de texto utilizando ${}. Se imprime un saludo personalizado con el nombre y la edad de la persona, utilizando las variables nombre y edad.

let nombre = "Juan";
let edad = 30;

// Uso de template strings
console.log(`Hola, mi nombre es ${nombre} y tengo ${edad} años.`);

27. Spread Operator

El uso del operador de propagación (spread operator) en JavaScript, que permite combinar múltiples arrays en uno solo de manera más concisa. Se combinan los arrays numeros y otrosNumeros en un nuevo array todosLosNumeros, lo que resulta en la impresión del array combinado [1, 2, 3, 4, 5, 6].

let numeros = [1, 2, 3];
let otrosNumeros = [4, 5, 6];

// Combinar arreglos
let todosLosNumeros = [...numeros, ...otrosNumeros];
console.log(todosLosNumeros);
// Imprime: [1, 2, 3, 4, 5, 6]

28. Destructuring

El uso de la destructuración (destructuring) en JavaScript para extraer propiedades de un objeto de forma más concisa. Se extraen las propiedades nombre y edad del objeto persona, lo que permite acceder a estos valores de manera directa, resultando en la impresión de "Juan 30".

let persona = { nombre: "Juan", edad: 30 };

// Destructuring de objeto
let { nombre, edad } = persona;
console.log(nombre, edad);
// Imprime: Juan 30

29. Parámetros de función predeterminados

El uso de parámetros de función predeterminados en JavaScript. La función greet() tiene un parámetro name que tiene un valor predeterminado de "Urian". Si no se proporciona ningún argumento al llamar a la función, se utilizará el valor predeterminado "Urian".

    function greet(name = "Urian") {
        return `Hola, ${name}!`;
    }

30. Operador Ternario

El operador ternario en JavaScript para asignar un valor a la variable mensaje basado en una condición. Si el precio es mayor que 50, el mensaje será "Caro", de lo contrario, será "Barato". En este caso, como el precio es 100, el mensaje impreso es "Caro".

let precio = 100;
let mensaje = precio > 50 ? "Caro" : "Barato";

console.log(mensaje); // Imprime: Caro

31. asignación de destructuración

Cómo realizar la asignación de destructuración en JavaScript para extraer propiedades específicas de un objeto. Se extraen las propiedades nombre, edad y ciudad del objeto persona, lo que permite acceder a estos valores de manera directa y utilizarlos en otras partes del código.

// Objeto con información de una persona
const persona = {
    nombre: 'Juan',
    edad: 30,
    ciudad: 'Madrid'
};

// Asignación de destructuración para extraer propiedades del objeto
const { nombre, edad, ciudad } = persona;

// Mostrar los valores extraídos
console.log(nombre); // Imprime: Juan
console.log(edad); // Imprime: 30
console.log(ciudad); // Imprime: Madrid

32. Operador de propagación para la clonación de objetos

Cómo clonar un objeto en JavaScript utilizando el operador de propagación (...). Se crea una copia del objeto personaOriginal llamada personaClon, lo que permite tener dos objetos independientes con las mismas propiedades y valores. Esto es útil para evitar mutaciones no deseadas en el objeto original.

// Objeto original
const personaOriginal = {
    nombre: 'Juan',
    edad: 30,
    ciudad: 'Madrid'
};

// Clonar el objeto utilizando el operador de propagación
const personaClon = { ...personaOriginal };

// Modificar una propiedad del objeto clonado
personaClon.edad = 35;

// Mostrar los objetos originales y clonados
console.log('Objeto original:', personaOriginal);
console.log('Objeto clonado:', personaClon);

33. operador de encadenamiento opcional (?)

El uso del operador de encadenamiento opcional (?.) en JavaScript para acceder a una propiedad anidada de forma segura. Se intenta acceder al código postal (codigoPostal) dentro del objeto direccion del objeto usuario. Si direccion no está definido o es null o undefined, la expresión devolverá undefined en lugar de lanzar un error.

// Objeto que puede contener propiedades anidadas
const usuario = {
    nombre: 'Juan',
    direccion: {
        ciudad: 'Madrid',
        codigoPostal: 28001
    }
};

// Acceder a una propiedad anidada de forma segura utilizando el operador de encadenamiento opcional
const codigoPostal = usuario.direccion?.codigoPostal;

// Mostrar el código postal si está presente, de lo contrario, mostrar un mensaje predeterminado
console.log('Código Postal:', codigoPostal ?? 'No disponible');

34. Eliminar Elementos repetidos de un array utilizando new Set

El constructor Set. Se crea un nuevo Set a partir del array registros, que automáticamente elimina los elementos duplicados. Luego, se convierte el Set de nuevo en un array utilizando el operador de propagación (...) para obtener un array con registros únicos en registrosUnicos.

// Array con registros repetidos
const registros = [1, 2, 3, 1, 2, 4, 5, 3];

// Eliminar registros repetidos utilizando Set
const registrosUnicos = [...new Set(registros)];

// Mostrar los registros únicos
console.log(registrosUnicos); // Imprime: [1, 2, 3, 4, 5]

35. Eliminar elementos repetidos de un Array usando filter y indexOf

Se filtran los elementos del array registros, conservando solo aquellos cuyo índice es igual a la primera aparición del elemento en el array, lo que resulta en un array con registros únicos en registrosUnicos.

const registros = [1, 2, 3, 1, 2, 4, 5, 3];
const registrosUnicos = registros.filter((valor, indice, arreglo) => arreglo.indexOf(valor) === indice);
console.log(registrosUnicos); // Imprime: [1, 2, 3, 4, 5]

36. Eliminar elementos repetidos de un Array usando filter y includes

Se filtran los elementos del array registros, conservando solo aquellos que no están repetidos en el array, lo que resulta en un array con registros únicos en registrosUnicos.

const registros = [1, 2, 3, 1, 2, 4, 5, 3];
const registrosUnicos = registros.filter((valor, indice, arreglo) => arreglo.includes(valor, indice + 1));
console.log(registrosUnicos); // Imprime: [1, 2, 3, 4, 5]

37. Eliminar elementos repetidos de un Array usando reduce

Se recorre el array registros, y para cada valor se verifica si ya está presente en el array de valores únicos (unicos). Si no está presente, se añade al array de valores únicos, de lo contrario se conserva el array actual. Esto resulta en un array con registros únicos en registrosUnicos.

const registros = [1, 2, 3, 1, 2, 4, 5, 3];
const registrosUnicos = registros.reduce((unicos, valor) => unicos.includes(valor) ? unicos : [...unicos, valor], []);
console.log(registrosUnicos); // Imprime: [1, 2, 3, 4, 5]

38. Asignación de valores predeterminados

Cómo asignar valores predeterminados a los parámetros de una función en JavaScript utilizando el operador de fusión nula (??). Si el argumento pasado a la función es null o undefined, se asigna el valor predeterminado 'Invitado'. Esto permite que la función se comporte correctamente incluso si no se proporcionan argumentos al llamarla.

// Función que toma un nombre como argumento y lo imprime
function saludar(nombre) {
    // Asignación de valor predeterminado usando el operador de fusión nula (??)
    nombre = nombre ?? 'Invitado';
    console.log(`Hola, ${nombre}!`);
}

// Llamada a la función sin argumento
saludar(); // Imprime: Hola, Invitado!

// Llamada a la función con un argumento
saludar('Juan'); // Imprime: Hola, Juan!

39. Verificar si un elemento existe en un array utilizando el método includes()

El método includes() en JavaScript para verificar si un elemento específico está presente en un array. Se verifica si el elemento 3 está presente en el array array, y se imprime un mensaje apropiado en la consola dependiendo del resultado. Si el elemento está presente, se imprime 'El elemento 3 está presente en el array', de lo contrario se imprime 'El elemento 3 no está presente en el array'

const array = [1, 2, 3, 4, 5];

// Verificar si el elemento 3 existe en el array
if (array.includes(3)) {
    console.log('El elemento 3 está presente en el array');
} else {
    console.log('El elemento 3 no está presente en el array');
}

40. Verificar si un elemento existe en un array utilizando el método indexOf()

El método indexOf() en JavaScript para verificar si un elemento específico está presente en un array. Se verifica si el elemento 3 está presente en el array array, y se imprime un mensaje apropiado en la consola dependiendo del resultado. Si el elemento está presente, se imprime 'El elemento 3 está presente en el array', de lo contrario se imprime 'El elemento 3 no está presente en el array'.

const array = [1, 2, 3, 4, 5];

// Verificar si el elemento 3 existe en el array
if (array.indexOf(3) !== -1) {
    console.log('El elemento 3 está presente en el array');
} else {
    console.log('El elemento 3 no está presente en el array');
}

41. Prevención de la modificación de objetos

Cómo prevenir la modificación de un objeto en JavaScript utilizando el método Object.freeze(). Al llamar a este método con el objeto persona como argumento, se congela el objeto, lo que significa que no se pueden agregar, eliminar o modificar propiedades existentes en el objeto. Esto ayuda a proteger el objeto persona de modificaciones no deseadas.

// Objeto que queremos proteger de modificaciones
const persona = {
    nombre: 'Juan',
    edad: 30
};

// Prevenir la modificación del objeto
Object.freeze(persona);

// Intentar modificar una propiedad del objeto
persona.nombre = 'Pedro'; // No se producirá ningún cambio

// Intentar añadir una nueva propiedad al objeto
persona.ciudad = 'Madrid'; // No se añadirá la propiedad

// Mostrar el objeto
console.log(persona); // Imprimirá el objeto original sin cambios

42. Callback, en JavaScript es una función que se pasa como argumento a otra función y que se ejecuta después de que alguna operación asincrónica o de larga duración haya finalizado.

La función hacerAlgoAsincrono() simula una operación asincrónica utilizando setTimeout(). Después de una demora de 2 segundos, ejecuta la función de callback manejarResultado() pasada como argumento. Esta función de callback maneja el resultado de la operación asincrónica, en este caso, simplemente imprime el mensaje "Resultado: Datos cargados" en la consola.

// Función que simula una operación asincrónica
function hacerAlgoAsincrono(callback) {
// Simular una demora de 2 segundos (por ejemplo, cargar datos del servidor)
setTimeout(function() {
    // Después de la demora, ejecutar la función de callback
    callback('Datos cargados');
}, 2000);
}

// Función de callback que maneja el resultado
function manejarResultado(resultado) {
    console.log('Resultado:', resultado);
}

// Llamar a la función asincrónica con el callback
hacerAlgoAsincrono(manejarResultado);

43. Método fetch

Cómo realizar una solicitud HTTP utilizando el método fetch() en JavaScript. Se realiza una solicitud a la URL especificada y se encadenan promesas para manejar la respuesta. En el primer then(), se verifica si la respuesta es exitosa y se parsea la respuesta como JSON. En el segundo then(), se manipulan los datos obtenidos. En el catch(), se manejan los errores que puedan ocurrir durante la solicitud.

// URL a la que haremos la solicitud
const url = 'https://jsonplaceholder.typicode.com/posts/1';

// Realizar la solicitud utilizando fetch
fetch(url)
.then(response => {
    // Verificar si la respuesta es exitosa
    if (!response.ok) {
    throw new Error('No se pudo obtener la respuesta');
    }
    // Parsear la respuesta como JSON
    return response.json();
})
.then(data => {
    // Manipular los datos obtenidos
    console.log(data);
})
.catch(error => {
    // Manejar errores
    console.error('Error:', error);
});

44. Método fetch usando async/await y try/catch

Se utiliza async/await y try/catch para realizar una solicitud HTTP utilizando el método fetch() en JavaScript. La función obtenerDatos() se declara como asíncrona (async), lo que permite utilizar await dentro de ella. Dentro del bloque try, se realiza la solicitud a la API y se manejan los errores utilizando throw y catch. Si la solicitud es exitosa, se convierte la respuesta a formato JSON y se imprimen los datos obtenidos. Si hay algún error durante la ejecución, se captura en el bloque catch y se imprime el mensaje de error correspondiente. Esto proporciona una forma más concisa y legible de trabajar con solicitudes HTTP asincrónicas en JavaScript.

async function obtenerDatos() {
try {
    // Hacer la solicitud a la API usando fetch
    const respuesta = await fetch('https://jsonplaceholder.typicode.com/posts/1');

    // Verificar si la respuesta es exitosa
    if (!respuesta.ok) {
    throw new Error('No se pudo obtener la respuesta');
    }

    // Convertir la respuesta a formato JSON
    const datos = await respuesta.json();

    // Imprimir los datos obtenidos
    console.log('Datos:', datos);
} catch (error) {
    // Manejar errores
    console.error('Error:', error.message);
}
}

// Llamar a la función para obtener los datos
obtenerDatos();

45. Usando Axios para hacer una solicitud HTTP de tipo (GET)

Se utiliza la biblioteca Axios para realizar una solicitud HTTP de tipo GET en JavaScript. Se declara una función asincrónica obtenerDatos() que utiliza async/await y try/catch para manejar la solicitud y cualquier error que pueda ocurrir. Dentro del bloque try, se utiliza axios.get() para hacer la solicitud a la URL especificada. Si la solicitud es exitosa, se imprime la respuesta en la consola. Si hay algún error durante la ejecución, se captura en el bloque catch y se imprime el mensaje de error correspondiente. Axios es una biblioteca popular para realizar solicitudes HTTP en JavaScript debido a su facilidad de uso y soporte para promesas y async/await.

async function obtenerDatos() {
try {
    // Hacer la solicitud a la API usando Axios
    const respuesta = await axios.get('https://jsonplaceholder.typicode.com/posts/1');

    // Imprimir los datos obtenidos
    console.log('Datos:', respuesta.data);
} catch (error) {
    // Manejar errores
    console.error('Error:', error.message);
}
}

// Llamar a la función para obtener los datos
obtenerDatos();

46. Diferencia entre los operadores de igualdad == y ===

console.log(0 == false);          // true
console.log(0 === false);         // false
console.log(1 == "1");            // true
console.log(1 === "1");           // false
console.log(null == undefined);   // true
console.log(null === undefined);  // false
console.log('0' == false);        // true
console.log('0' === false);       // false
console.log([] == []);            // false, hacen referencia a objetos diferentes en memoria
console.log([] === []);           // false, hacen referencia a objetos diferentes en memoria
console.log({} == {});            // false, hacen referencia a objetos diferentes en memoria
console.log({} === {});           // false, hacen referencia a objetos diferentes en memoria

47. Funciones constructoras son funciones que se utilizan para crear objetos en JavaScript

Cómo utilizar funciones constructoras en JavaScript para crear objetos. La función constructora Persona se define con parámetros nombre y edad, que se utilizan para inicializar las propiedades del objeto. Se crean objetos persona1 y persona2 utilizando el operador new, pasando los valores deseados para nombre y edad. Después de crear los objetos, se puede acceder a sus propiedades utilizando la notación de punto (persona1.nombre, persona1.edad, etc.). Esto ilustra cómo las funciones constructoras pueden ser utilizadas como una forma conveniente de crear múltiples objetos con la misma estructura y comportamiento en JavaScript.

// Definir una función constructora para crear objetos de tipo Persona
function Persona(nombre, edad) {
    this.nombre = nombre;
    this.edad = edad;
}

// Crear objetos utilizando la función constructora
const persona1 = new Persona('Juan', 30);
const persona2 = new Persona('María', 25);

// Acceder a las propiedades de los objetos creados
console.log(persona1.nombre); // Imprime: Juan
console.log(persona1.edad);   // Imprime: 30

console.log(persona2.nombre); // Imprime: María
console.log(persona2.edad);   // Imprime: 25

48. Generar una matriz (Array) de números con números desde el 0 hasta el 50

Cómo generar una matriz (array) de números del 0 al 50 en JavaScript utilizando un bucle for. Se inicializa un array vacío numbersArray y se define una variable max con el valor 50. Luego, se utiliza un bucle for para iterar desde 0 hasta max, y en cada iteración se agrega el valor actual de i al array numbersArray utilizando el método push(). Finalmente, se imprime el array resultante en la consola.

const numbersArray = [];
const max = 50;

for (let i = 0; i <= max; i++) {
    numbersArray.push(i);
}

console.log(numbersArray); // Imprime: [0, 1, 2, ..., 50]

49. Generar un conjunto aleatorio de personajes alfanuméricos

Se define una cadena caracteres que contiene todos los caracteres alfabéticos en mayúsculas y minúsculas, así como los dígitos del 0 al 9. Luego, se especifica la longitud del conjunto deseado en la variable longitudConjunto. Se inicializa una cadena vacía conjuntoAleatorio que se utilizará para almacenar el conjunto aleatorio generado.

A continuación, se utiliza un bucle for para iterar longitudConjunto veces. En cada iteración, se genera un índice aleatorio entre 0 y la longitud de la cadena de caracteres utilizando Math.random(). Luego, se utiliza charAt(indice) para obtener el carácter correspondiente al índice generado y se concatena a la cadena conjuntoAleatorio.

const caracteres = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
const longitudConjunto = 10; // Longitud del conjunto deseado
let conjuntoAleatorio = '';

for (let i = 0; i < longitudConjunto; i++) {
    const indice = Math.floor(Math.random() * caracteres.length);
    conjuntoAleatorio += caracteres.charAt(indice);
}

console.log(conjuntoAleatorio); // Imprime el conjunto aleatorio generado

50. Verifique si el valor de una variable es un número

Se define una variable argumento que contiene el valor que se desea verificar. Luego, se utiliza un condicional if para comprobar si el tipo de datos de argumento es igual a 'number' utilizando el operador typeof. Si el resultado de esta comprobación es verdadero, se imprime en la consola el mensaje 'El argumento es un número.', de lo contrario se imprime 'El argumento NO es un número.'

const argumento = 5; // Cambia esto por el argumento que desees verificar

if (typeof argumento === 'number') {
    console.log('El argumento es un número.');
} else {
    console.log('El argumento NO es un número.');
}

51. Verifique que un argumento dado en una función es un array

Se define una función llamada verificarArray que toma un argumento argumento. Dentro de la función, se utiliza el método estático Array.isArray() para comprobar si argumento es un array. Si Array.isArray(argumento) devuelve true, se imprime en la consola el mensaje 'El argumento es un array.', de lo contrario se imprime 'El argumento NO es un array.'.

Finalmente, se llama a la función verificarArray con un ejemplo de array miArray como argumento.

function verificarArray(argumento) {
    if (Array.isArray(argumento)) {
        console.log('El argumento es un array.');
    } else {
        console.log('El argumento NO es un array.');
    }
}

const miArray = [1, 2, 3]; // Cambia esto por el argumento que desees verificar
verificarArray(miArray);

52. Extraer el máximo y el mínimo de una serie de números en un array utilizando los métodos Math.max() y Math.min() junto con el operador de propagación (...)

Cómo extraer el máximo y el mínimo de una serie de números almacenados en un array utilizando los métodos Math.max() y Math.min() junto con el operador de propagación (...).

const numeros = [5, 2, 8, 10, 3];

const maximo = Math.max(...numeros);
const minimo = Math.min(...numeros);

console.log('Máximo:', maximo); // Imprime: Máximo: 10
console.log('Mínimo:', minimo); // Imprime: Mínimo: 2

53. Validar si un Array esta vacio

Se define un array llamado miArray, y luego se utiliza una estructura condicional if para verificar si la propiedad length del array es igual a cero. Si miArray.length es igual a cero, significa que el array está vacío y se imprime en la consola el mensaje 'El array está vacío.'. De lo contrario, si miArray.length no es igual a cero, significa que el array no está vacío y se imprime en la consola el mensaje 'El array NO está vacío.'.

const miArray = []; // Cambia esto por tu array

if (miArray.length === 0) {
    console.log('El array está vacío.');
} else {
    console.log('El array NO está vacío.');
}

54. setTimeout() se utiliza para ejecutar una función después de que haya transcurrido un tiempo específico (en milisegundos).

Se define una función llamada saludar() que simplemente imprime en la consola el mensaje '¡Hola después de 2 segundos!'. Luego, se llama a la función setTimeout() con dos argumentos: la función saludar que se ejecutará después de que haya transcurrido el tiempo especificado, y el tiempo en milisegundos (en este caso, 2000 milisegundos, es decir, 2 segundos).

// Función que se ejecutará después de 2 segundos
function saludar() {
    console.log('¡Hola después de 2 segundos!');
}

// Llamar a la función después de 2 segundos
setTimeout(saludar, 2000);

55. setInterval() se utiliza para ejecutar una función repetidamente, cada cierto intervalo de tiempo especificado (en milisegundos)

// Función que se ejecutará cada segundo
function mostrarMensaje() {
    console.log('Mensaje repetido cada segundo');
}

// Llamar a la función cada segundo
setInterval(mostrarMensaje, 1000);

56. Eliminar elemento de un Array con el Método splice(), este modifica el contenido de un array eliminando o reemplazando elementos existentes y/o agregando nuevos elementos en su lugar.

Esto ilustra cómo se puede configurar una tarea para que se repita a intervalos regulares utilizando setInterval() en JavaScript.

let array = [1, 2, 3, 4, 5];
const indiceAEliminar = 2; // Índice del elemento a eliminar

// Eliminar el elemento en el índice especificado
array.splice(indiceAEliminar, 1);

console.log(array); // Resultado: [1, 2, 4, 5]

57. Eliminar elemento de un Array con el Método pop(), elimina el último elemento de un array y lo devuelve.

Al llamar al método pop() sobre el array, se elimina el último elemento, que es el número 5, y se almacena en la variable elementoEliminado,después de ejecutar pop(), el array queda modificado y ahora contiene los números del 1 al 4.

let array = [1, 2, 3, 4, 5];

// Eliminar el último elemento del array
const elementoEliminado = array.pop();

console.log(array); // Resultado: [1, 2, 3, 4]
console.log('Elemento eliminado:', elementoEliminado);
// Resultado: Elemento eliminado: 5

58. Eliminar elemento de un Array con el Método shift(), este elimina el primer elemento de un array y lo devuelve.

Al llamar al método shift() sobre el array, se elimina el primer elemento, que es el número 1, y se almacena en la variable elementoEliminado, después de ejecutar shift(), el array queda modificado y ahora contiene los números del 2 al 5.

let array = [1, 2, 3, 4, 5];

// Eliminar el primer elemento del array
const elementoEliminado = array.shift();

console.log(array); // Resultado: [2, 3, 4, 5]
console.log('Elemento eliminado:', elementoEliminado);
// Resultado: Elemento eliminado: 1

59. Agregar un elemento al inicio del Array

Al llamar al método unshift() con el argumento "uva", se agrega esta fruta al principio del array, después de ejecutar unshift(), el array se modifica y ahora contiene las frutas "uva", "manzana", "banana" y "naranja".

// Declarar un array de frutas
let frutas = ["manzana", "banana", "naranja"];

// Agregar un elemento al inicio del array
frutas.unshift("uva");

60. Agregar un elemento al final del Array

Al llamar al método push() con el argumento "sandía", se agrega esta fruta al final del array, después de ejecutar push(), el array se modifica y ahora contiene las frutas "uva", "manzana", "banana", "naranja" y "sandía".

// Agregar un elemento al final del array
frutas.push("sandía");

console.log("Fruta agregada al final del array:", frutas);

Expresiones

Una expresión es una unidad de código que da como resultado un valor

2 + 2 es una expresión que da como resultado el valor 4
Cuál crees que seria la salida de este código?
console.log(2 + 2 * 4);
//Salidad 10
En JavaScript, la multiplicación (*) tiene una precedencia mayor que la suma (+). Entonces, primero se evalúa la multiplicación (2 * 4), que es igual a 8, y luego se suma 2 al resultado (8 + 2), lo que da como resultado 10.
Es recomendable ser más especifico con la operación ejemplo:
console.log(( 2 + 2 ) * 4);

Distinción entre mayúsculas y minúsculas

JavaScript distingue por completo entre mayúsculas y minúsculas.

Espacio en blanco

En JavaScript, los espacios en blanco, como los espacios, las tabulaciones y las líneas nuevas, generalmente se denominan "espacios en blanco". Estos caracteres en blanco no tienen ningún efecto en el comportamiento del código JavaScript en sí mismo, pero son importantes para la legibilidad del código y para separar tokens (como palabras clave, operadores y variables) para que el intérprete de JavaScript pueda entender el código correctamente.
console.log(       "Hola Mundo"  );

Las variables

Son una estructura de datos que asigna un nombre representativo a un valor. Pueden contener datos de cualquier tipo.

Preguntas y Respuestas 😱

¿Cuál es la salida de este código?

let miArray = [1, , 3];
console.log(miArray.length);
//Salida: 3

¿Cuál es la salida de este código?

console.log(2 + '2');
//Salida: 22

¿Cuál es la salida de este código?

console.log(0.1 + 0.2 === 0.3);
//Salida: false

¿Cuál es la salida de este código?

let x = 5;
console.log(++x);
//Salida: 6

¿Cuál es la salida de este código?

console.log(1 < 2 < 3);
//Salida: true

¿Cuál es la salida de este código?

console.log(3 < 2 < 1);
//Salida: true

¿Cuál es la salida de este código?

console.log(false == "0");
//Salida: true

¿Cuál es la salida de este código?

console.log(false === "0");
//Salida: false

¿Cuál es la salida de este código?

console.log([] == []);
//Salida: false

¿Cuál es la salida de este código?

console.log(1 + "1");
//Salida: 11

¿Cuál es la salida de este código?

console.log(1 - "1");
//Salida: 0

¿Cuál es la salida de este código?

console.log("20" > "3");
//Salida: false

¿Cuál es la salida de este código?

console.log(1 + "2", +3 + 4);
//Salida: "12" 7

¿Cuál es la salida de este código?

let miArrayNumeros = [1, 2, 3];
//Salida: [1, 1, 1]
//Nota: Recordar ue el método fill() cambia todos los elementos en una matriz por un valor estático y devuelve la matriz modificada. En el primer caso, fill(1) rellena todos los elementos con el valor 1, y en el segundo caso, fill(0) rellena todos los elementos con el valor 0

¿Cuál es la salida de este código?

console.log(miArrayNumeros.fill(0));
//Salida: [1, 1, 1]

Mejora la Experiencia del Usuario con Loading Request

URIAN VIERA — Tue, 09 Jul 2024 14:18:20 +0000

¿Alguna vez te has preguntado cómo mejorar la experiencia del usuario en tus aplicaciones web durante las solicitudes y procesos a sincrónicos? 😫 No hay nada peor que un usuario mirando una pantalla en blanco, sin saber si la App está haciendo algo. ¡Es hora de cambiar eso!

Loading Request es un paquete npm versátil, diseñado para mejorar la experiencia del usuario mostrando indicadores de carga durante solicitudes y procesos asincrónicos en aplicaciones web. Compatible con frameworks populares como React, Vue, Angular, Svelte, Next.js, y Astro, este paquete simplifica la implementación de spinners, barras de progreso y otros indicadores visuales.

¿Para qué fue creado?

Loading Request facilita la incorporación de indicadores de carga en aplicaciones JavaScript, proporcionando una solución rápida y eficiente para mostrar que una solicitud o proceso está en curso.

¿Qué necesidad resuelve?

Este paquete responde a la necesidad de mejorar la usabilidad y percepción del rendimiento en aplicaciones web al proporcionar una visualización clara y atractiva del estado de carga, evitando la incertidumbre del usuario durante procesos asincrónicos.

Ventajas y Características Clave:

Fácil de usar: Implementa indicadores de carga fácilmente en tu aplicación web con solo unas pocas líneas de código.
Compatible con múltiples frameworks: Funciona sin problemas con React, Vue, Angular, Svelte, Next.js, e incluso con JavaScript nativo a través de CDN.
Personalización flexible: Ajusta colores del spinner y del texto de carga para adaptarse a tu diseño.
Integración rápida: Instalación simple a través de npm o yarn, listo para usar en minutos.
Funcionalidad asincrónica: Soporta operaciones asíncronas como carga de datos, envío de formularios, y navegación entre páginas.
Animaciones suaves: Utiliza animaciones CSS para una experiencia de usuario fluida.
Ligero y eficiente: Minimiza el impacto en el rendimiento de la aplicación.
Documentación clara y detallada: Incluye ejemplos prácticos y documentación completa para facilitar la implementación y configuración.
Actualizaciones regulares: Mantenido activamente con mejoras y actualizaciones periódicas.
Licencia abierta: Publicado bajo licencia ISC, permitiendo su uso en proyectos comerciales y personales sin restricciones.

Con Loading Request, puedes ofrecer una experiencia de usuario más fluida y profesional, asegurando que tus aplicaciones web sean visualmente atractivas y funcionales durante la carga de datos.

Casos de uso:

Implementar Loading Request en el envío de un formulario

👉 Ver Código en GitHub

Implementación de Filtrado Dinámico en Next.js con Loading Request

👉 Ver Código en GitHub

Implementación de Filtros Checkbox en ReactJS utilizando el paquete Loading Request

👉 Ver Código en GitHub

Instalación

$ npm install loading-request --save
$ yarn add loading-request

Ejemplo Práctico utilizando React.js

import { showLoading, hideLoading } from "loading-request";
import "loading-request/dist/index.css";

const App = () => {
  const handleShowLoading = () => {
    showLoading({
      message: "Cargando...",
      spinnerColor: "#f3752b",
      textLoadingColor: "#EE5E09",
      textLoadingSize: "20px",
    });

    hideLoading({ timeLoading: 1500 });
  };

  return <button onClick={handleShowLoading}>Mostrar Loading</button>;
};

export default App;

Ejemplo Práctico utilizando Next.js

"use client";
import { useState } from "react";
import { getSimpson } from "../actions/getSimpson";
import Image from "next/image";

import { showLoading, hideLoading } from "loading-request";
import "loading-request/dist/index.css";

export default function ApiSimpson() {
  const [data, setData] = useState(null);

  const handleGetSimpson = async () => {
    showLoading({ message: "Cargando API..." });
    try {
      const data = await getSimpson();
      setData(data);
    } catch (error) {
      console.error("Error al obtener los datos:", error);
    } finally {
      hideLoading();
    }
  };

  return (
    <>
      <button className="my-4" onClick={handleGetSimpson}>
        Obtener personajes
      </button>

      {data && (
        <div className="cards">
          {data.map((personaje, index) => (
            <div key={index} className="card">
              <div>{personaje.character}</div>
              <Image width={200} height={200} src={personaje.image} alt={personaje.character} />
            </div>
          ))}
        </div>
      )}
    </>
  );
}

Mostrando Resultados de una API REST en Next.js

👉 Ver Código en GitHub

Ejemplo Práctico utilizando Svelte.js

<script>
  import svelteLogo from "./assets/svelte.svg";

  import { showLoading, hideLoading } from "loading-request";
  import "loading-request/dist/index.css";

  let personas = null;
 async function fetchPersonas() {

      showLoading({
          message: "Cargando Solicitud...",
          spinnerColor: "#f3752b",
          textLoadingColor: "#EE5E09",
          textLoadingSize: "18px",
      });

      try {
        const URL = "https://reqres.in/api/users?page=1";
        const response = await fetch(URL);
        if (!response.ok) {
          throw new Error('Error en la solicitud');
        }
        personas = await response.json();
      } catch (err) {
        console.log('Error al cargar la API:', err.message);
      } finally {
        hideLoading();
      }
  }
</script>

<main>
  <h1>
    <button on:click={fetchPersonas}> Cargar API</button>
    <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
  </h1>

 {#if personas}
    <ul class="user-list">
      {#each personas.data as persona (persona.id)}
        <li class="user-item">
          <img
            src={persona.avatar}
            alt={persona.first_name}
            class="user-avatar"
          />
          <div class="user-details">
            <p class="user-details__name">
              Nombre: {persona.first_name}
            </p>
            <p class="user-details__email">Email: {persona.email}</p>
          </div>
        </li>
      {/each}
    </ul>
  {/if}
</main>

Resultado Completo del Ejemplo Práctico con Svelte

👉 Ver Código en GitHub

Ejemplo Práctico en Vue.js

<script setup>
import { showLoading, hideLoading } from "loading-request";
import "loading-request/dist/index.css";

const handleShowLoading = () => {
  showLoading({
    message: "Cargando App...",
    spinnerColor: "#f3752b",
    textLoadingColor: "#EE5E09",
    textLoadingSize: "20px",
  });

  hideLoading({ timeLoading: 1000 });
};
</script>

<template>
  <div id="app">
    <button @click="handleShowLoading">Mostrar Loading</button>
  </div>
</template>

Uso a través de CDN

También puedes incluir loading-request directamente en tu proyecto utilizando un enlace CDN. Sigue estos pasos:

<!-- Incluye el CSS -->
<link rel="stylesheet" href="https://unpkg.com/loading-request/dist/index.css" />

<!-- Incluye el JavaScript -->
<script src="https://unpkg.com/loading-request/dist/index.js"></script>

Una vez incluido, podrás utilizar showLoading y hideLoading en tu código JavaScript o
TypeScript como se muestra en los ejemplos de uso.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Loading Request</title>
    <!-- Incluir el CSS de loading-request desde CDN -->
    <link rel="stylesheet" href="https://unpkg.com/loading-request/dist/index.css" />
  </head>
  <body>
    <button id="btnLoading">Mostrar Loading</button>

    <!-- Incluir el JavaScript de loading-request desde CDN como módulo -->
    <script type="module">
      import { showLoading, hideLoading } from "https://unpkg.com/loading-request/dist/index.js";

      // Función para mostrar el loading
      function handleShowLoading() {
        showLoading({
          message: "Cargando App...",
          spinnerColor: "#f3752b",
          textLoadingColor: "#EE5E09",
          textLoadingSize: "16px",
        });

        hideLoading();
      }

      // Asociar la función al botón
      document.querySelector("#btnLoading").addEventListener("click", handleShowLoading);
    </script>
  </body>
</html>

API

showLoading(opciones?: ShowLoadingOptions)

Es una función que permite mostrar un indicador de carga con opciones personalizables.

Opciones:
- message: Mensaje que se muestra junto al indicador de carga. Por defecto es "Cargando...".
- spinnerColor: Color opcional del borde del spinner. Si se proporciona, se aplica dinámicamente.
- textLoadingColor: Color opcional del texto del mensaje de carga. Si se proporciona, se aplica dinámicamente.
- textLoadingSize: Tamaño opcional del texto del mensaje de carga. Se aplica dinámicamente si se proporciona por default "16px".

Recibe un objeto de configuración opcional. Si no se proporciona ningún argumento, se utilizará un objeto vacío como valor por defecto.

Ejemplo de uso:

showLoading({
  message: "Cargando...",
  spinnerColor: "#f3752b",
  textLoadingColor: "#EE5E09",
  textLoadingSize: "18px",
});

hideLoading(opciones?: HideLoadingOptions)

Es una función que permite ocultar el indicador de carga después de un período de tiempo especificado.

Parámetros:
- opciones: Un objeto opcional que puede contener:
- timeLoading: Tiempo en milisegundos antes de ocultar el indicador. Por defecto es 500ms.

Si se llama sin argumentos, se utilizará un objeto vacío como valor por defecto.

Ejemplo de uso:

hideLoading({ timeLoading: 1500 });

Únete y Contribuye

Si encuentras algún problema o tienes una idea para mejorar el paquete, por favor abre un issue o envía un pull request en GitHub: https://github.com/urian121/loading-request

Desarrollado por

Copyright

License

Licensed under ISC

Agradecimientos

¡Gracias a todos los Devs 👨‍💻 que han utilizado y contribuido al desarrollo de Loading Request! Su apoyo y retroalimentación son fundamentales para mejorar continuamente este paquete.