DEV Community: Juan

Astro: La elección ideal para sitios web

Juan — Tue, 10 Jun 2025 01:21:23 +0000

Hola, desarrollador/a. Si estás en búsqueda de herramientas modernas para crear sitios web rápidos, eficientes y fáciles de mantener, quiero hablarte de una que se ha ganado mi preferencia: Astro.

La he utilizado en varios proyectos, desde páginas personales hasta MVPs completos, y siempre me ha sorprendido su rendimiento y flexibilidad. A continuación, te cuento por qué creo que Astro es una de las mejores elecciones disponibles hoy.

Rendimiento excepcional: La arquitectura de "Islas"

Astro destaca por su enfoque en la velocidad. Crea sitios web optimizados de forma rápida y sencilla. El secreto reside en su arquitectura de "Islas" (Island Architecture).

Esta arquitectura funciona de la siguiente manera: la mayor parte del contenido se carga como HTML estático, maximizando la velocidad de carga. JavaScript solo se carga en las secciones interactivas (las "islas"), minimizando el impacto en el rendimiento. En muchos casos, la cantidad de JavaScript es mínima. Esto se traduce en tiempos de carga casi instantáneos, una excelente experiencia de usuario y métricas Core Web Vitals excepcionales. A diferencia de otros frameworks, como Next.js, que cargan JavaScript en toda la página, Astro solo hidrata las secciones interactivas cuando es necesario. El resultado: velocidad extrema, especialmente en dispositivos móviles y conexiones lentas.

Flexibilidad total: componentes de múltiples frameworks

Astro no te obliga a casarte con una sola tecnología. Podés usar componentes de React, Vue, Svelte, Solid, Web Components, Lit y más, todo dentro del mismo proyecto.

Esta compatibilidad lo vuelve ideal para:

Reutilizar componentes existentes.
Integrar diferentes tecnologías según lo que cada parte del proyecto necesite.
Trabajar en equipo con desarrolladores que usen distintos stacks.

Su enfoque framework-agnostic acelera el desarrollo sin limitar tus opciones.

Diseño impecable con Shadcn UI

Si te interesa lograr un diseño profesional con mínimo esfuerzo, la combinación de Astro + Shadcn UI es imbatible. Shadcn UI ofrece una colección de componentes accesibles, modernos y reutilizables que se integran perfectamente con Astro.

Te permite crear interfaces elegantes en menos tiempo, sin renunciar a la personalización ni al rendimiento.

Escalabilidad real: de MVP a producción

¿Astro solo sirve para sitios estáticos simples? Para nada. Una de las cosas que más me sorprendió de Astro es lo bien que se adapta a proyectos más grandes y complejos. Aunque brilla en la creación de sitios ultra rápidos, no se queda corto cuando querés escalar.

¿Querés agregar autenticación de usuarios? Tenés opciones como Clerk o Auth.js, que se integran perfectamente y te permiten manejar login, perfiles, sesiones y seguridad sin romperte la cabeza.

¿Estás pensando en estilos profesionales? TailwindCSS es casi un estándar hoy en día y Astro lo soporta. ¿Querés algo con componentes ya listos? Ahí entra Shadcn UI, que funciona muy bien con Tailwind y te permite construir interfaces limpias y modernas en tiempo récord. ¿No te gusta Shadcn? Prueba Daisyui. ¿Demasiado moderno? Prueba Astro-Bootstrap. ¿Quieres instalar bootstrap por ti mismo? Tan solo leete este increible blog

¿Tu proyecto necesita contenido dinámico o estructurado? Content Collections te permite definir esquemas para tus posts, productos, tutoriales, o lo que sea. Y si vas más allá, podés sumar Sanity, DatoCMS o incluso consumir APIs de terceros con total libertad.

Y si tu aplicación crece, ¿cómo se comporta Astro? Muy bien. Podés añadir SSR (Server-Side Rendering), usar Middleware para rutas protegidas, e incluso trabajar con herramientas como Planetscale o Turso como bases de datos escalables, o Stripe y Mercado Pago para pagos, sin fricciones.

¿Deploy? Tan simple como elegir tu plataforma favorita. Astro funciona muy bien con Vercel, Netlify, Cloudflare Pages, y hasta con Railway si necesitás un backend que lo acompañe.

Optimización SEO y experiencia de desarrollo placentera

La velocidad de Astro es fundamental para el SEO. La generación estática y la carga ultrarrápida mejoran el posicionamiento en Google. Los motores de búsqueda valoran los sitios web rápidos y con contenido fácilmente indexable. Además, Astro cuenta con varias integraciones que facilitan aún más la optimización SEO. La experiencia de desarrollo también es excelente:

La sintaxis .astro es clara e intuitiva.
La documentación sobre Astro es excelente.
Tiene un CLI potente
La comunidad es activa y se encuentra en crecimiento.

Todo esto se traduce en una curva de aprendizaje suave y un flujo de trabajo placentero.

Casos de uso ideales: Donde Astro brilla

Astro es perfecto para:

Sitios web estáticos: Páginas informativas, landing pages, etc.
Portafolios: Presentación de trabajos y proyectos.
Blogs: Publicación de artículos y contenido.
Páginas de marketing: Campañas publicitarias y conversiones.
Plataformas de contenido: Documentación, noticias, etc.
Aplicaciones multipágina (MPAs) optimizadas: Aplicaciones web con múltiples páginas, optimizadas para el rendimiento.
Aplicaciones web progresivas (PWAs): Aplicaciones web con funcionalidad offline.
Proyectos con interfaces profesionales: Utilizando Shadcn UI u otras librerías de componentes.

Conclusión: Astro, mi herramienta favorita

Astro combina lo mejor de varios mundos: velocidad, flexibilidad, escalabilidad y una experiencia de desarrollo excelente. Ya sea que estés creando un sitio estático, un blog personal, una app multipágina o un MVP para un cliente, Astro responde con eficiencia y claridad.

Y con funciones en constante evolución, como Server Islands y Content Layer, se posiciona como una tecnología a seguir muy de cerca.

Te invito a probar Astro en tu próximo proyecto. Estoy seguro de que, como yo, no vas a querer volver atrás.

5 Funciones de CSS que deberías conocer

Juan — Thu, 26 Dec 2024 16:45:27 +0000

Hoy quiero hablarte de cinco funciones geniales de CSS que probablemente cambiarán tu manera de escribir estilos. Si estás aprendiendo CSS, estas funciones te van a facilitar la vida. Vamos a verlas una por una, con ejemplos que muestran cómo haríamos las cosas "a mano" y cómo podemos simplificarlas con estas herramientas.

1. calc(): Realiza cálculos directamente en tu CSS 📏

¿Te has encontrado sumando o restando valores manualmente para ajustar el tamaño de un elemento? Con calc(), puedes hacerlo directamente en tu hoja de estilos, sin necesidad de cálculos previos.

Ejemplo sin calc():

.container {
  width: 70%;
  margin: 20px;
}

Ejemplo con calc():

.container {
  width: calc(70% - 20px);
  margin: 20px;
}

Con calc(), puedes combinar diferentes unidades de medida, como porcentajes y pixeles, para lograr diseños más flexibles y adaptables.

2. repeat(): Simplifica la creación de grids 💡

Si usas Grid Layout, seguro que te has encontrado escribiendo columnas o filas repetitivas. Con repeat(), puedes evitar códigos redundantes y mejorar la legibilidad.

Ejemplo sin repeat():

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Tres columnas iguales */
}

Ejemplo con repeat():

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Lo mismo, pero más limpio */
}

repeat() es ideal para grids complejos o con un patrón definido

3. min(): Controla el tamaño máximo dinámico 🤏

min() te permite especificar el tamaño más pequeño entre varios valores, perfecto para diseños responsivos.

Ejemplo sin min():

.box {
  width: 50vw; /* Podría ser demasiado grande en pantallas grandes */
}

@media (min-width: 600px) {
  .box {
    width: 300px; /* Tamaño fijo en pantallas más grandes */
  }
}

Ejemplo con min():

.box {
  width: min(50vw, 300px); /* Escoge automáticamente el valor más pequeño */
}

Con min(), reduces reglas de media queries y logras un diseño más fluido.

4. clamp(): Control total del tamaño en diseños responsivos

clamp() permite definir un rango de tamaños mínimo y máximo, ideal para fuentes y elementos que necesitan escalar según el tamaño de la pantalla.

Ejemplo sin clamp():

.text {
  font-size: 16px; /* Tamaño fijo */
}

@media (min-width: 600px) {
  .text {
    font-size: 20px;
  }
}

@media (min-width: 1200px) {
  .text {
    font-size: 24px;
  }
}

Ejemplo con clamp():

.text {
  font-size: clamp(16px, 2vw, 24px); /* Escala entre 16px y 24px */
}

Con clamp(), eliminas varias reglas de media queries y consigues un diseño mucho más flexible.

5. fit-content(): Ajusta el ancho al contenido

fit-content() te permite ajustar el ancho de un elemento al tamaño de su contenido, pero sin que este se expanda más allá de un valor máximo que definas. Esto es muy útil para crear botones o elementos que se ajusten dinámicamente al texto que contienen, pero que no se hagan excesivamente grandes en pantallas anchas.

Ejemplo sin fit-content():

.button {
  width: auto; /* Se expande según el contenido */
  padding: 10px 20px;
  border: 1px solid black;
}

(En este caso, si el texto del botón es muy largo, el botón se extenderá demasiado).

Ejemplo con fit-content():

.button {
  width: fit-content(200px); /* Se ajusta al contenido, pero con un máximo de 200px */
  padding: 10px 20px;
  border: 1px solid black;
}

Con fit-content(), el botón se ajustará al tamaño del texto, pero nunca superará los 200px de ancho. Si el texto es más corto, el botón será más pequeño.

Bases de Datos Serverless: Por qué Turso Está Cambiando el Juego

Juan — Wed, 18 Dec 2024 18:28:44 +0000

En la era del desarrollo moderno de aplicaciones, la gestión adecuada de los datos es más crucial que nunca. Es aquí donde surge la revolución de las bases de datos serverless, liderada por tecnologías como Turso.

¿Qué es una base de datos serverless?

Una base de datos serverless es un servicio gestionado automáticamente que incluye la infraestructura subyacente para el almacenamiento de datos. Esto permite a los desarrolladores enfocarse en crear aplicaciones sin preocuparse por configurar y administrar servidores. Las bases de datos serverless son escalables, rentables (pagas solo por lo que usas) y ofrecen alta disponibilidad desde el primer momento.

Turso: Rendimiento Extremo y Escalabilidad Global

Turso es una plataforma de base de datos serverless diseñada para ofrecer un rendimiento excepcional, simplicidad y escalabilidad global. Combina lo mejor del almacenamiento distribuido con la facilidad de uso que los desarrolladores modernos esperan.

Características claves de Turso

Modelo Realmente Serverless: Sin servidores que mantener ni configuraciones complejas. Solo defines tu esquema y Turso se encarga del resto.
API Sencilla pero Poderosa: Basada en SQL, su API es intuitiva y permite consultas avanzadas, integrándose perfectamente con herramientas populares.
Alto Rendimiento: Gracias a su arquitectura distribuida, incluso las aplicaciones con mucho tráfico funcionan con latencias ultra bajas.
Precios Flexibles: Paga solo por lo que consumes, ideal para proyectos en crecimiento.

Por qué Turso es una Revolución

Despliegue Instantáneo: Olvídate de configurar y mantener servidores. Con unos pocos comandos, puedes tener una base de datos funcionando para tus aplicaciones.
Escalado Automático: Se ajusta automáticamente según la demanda, ya sea para una aplicación pequeña o una plataforma global.
Optimización Full-Stack: Su API intuitiva y su integración con entornos como Node.js, TypeScript y React permiten a los desarrolladores full-stack centrarse en escribir código, no en administrar infraestructura.
Ecosistema en Crecimiento: Turso está ganando popularidad rápidamente gracias a su enfoque innovador en la construcción de comunidades y soporte para aplicaciones de misión crítica.

Casos de Uso Destacados

Aplicaciones Web en Tiempo Real

Construye aplicaciones de chat en tiempo real con confianza. La replicación global y la fragmentación automática aseguran que tus mensajes se sincronicen con latencias mínimas.

Comercio Electrónico Global

Las tiendas en línea requieren tiempos de carga rápidos y bases de datos consistentes, incluso con grandes volúmenes de transacciones. Turso ofrece operaciones de lectura y escritura efectivas en cualquier parte del mundo.

Aplicaciones Móviles Escalables

Los datos se almacenan de manera distribuida y son accesibles con tiempos de respuesta rápidos, incluso para millones de usuarios.

Análisis y Generación de Informes

Realiza análisis y genera informes en tiempo real sin interrupciones. Turso maneja grandes volúmenes de datos con latencias mínimas.

Conclusión

En un mundo donde el tiempo de comercialización, el rendimiento y la escalabilidad son esenciales, Turso se posiciona como la solución de base de datos serverless para la próxima generación. Si buscas una gestión de datos moderna y sin complicaciones, lejos de la administración de infraestructura, Turso podría ser justo lo que necesitas.

Mejores Prácticas en JavaScript Moderno - Parte 2

Juan — Tue, 03 Dec 2024 01:55:43 +0000

En la primera parte de este artículo, exploramos las bases de JavaScript moderno y algunas mejores prácticas esenciales para comenzar a escribir código más limpio y eficiente. Pero como desarrolladores, sabemos que siempre hay más por aprender y mejorar.

8. Encadenamiento opcional (`?.`)

Cuando trabajamos con objetos o estructuras anidadas, a veces nos enfrentamos a la necesidad de verificar si una propiedad existe antes de intentar acceder a ella. El operador de encadenamiento opcional (?.) es una herramienta poderosa que simplifica esta tarea, evitando errores de acceso a propiedades de valores null o undefined.

¿Por qué es útil?

Imagina que tienes una estructura de objeto compleja y no estás seguro si ciertas propiedades existen en ella. Sin el encadenamiento opcional, tendrías que hacer verificaciones manuales en cada paso, lo cual puede hacer que tu código sea más largo y menos legible. Con el operador ?., puedes acceder a propiedades de manera segura y obtener undefined si alguna de las propiedades intermedias no existe.

Ejemplo básico

const producto = {};
const impuesto = producto?.precio?.impuesto;
console.log(impuesto); // undefined

En este caso, como producto no tiene la propiedad precio, el encadenamiento opcional devuelve undefined en lugar de generar un error.

Ejemplo con un objeto más complejo

Imagina que tienes una lista de productos con diferentes propiedades, algunas de las cuales pueden estar vacías o no definidas:

const productos = [
  { nombre: 'Laptop', detalles: { precio: 1000 } },
  { nombre: 'Teléfono', detalles: null },
  { nombre: 'Tablet', detalles: { precio: 500, impuesto: 50 } }
];

// Acceso seguro a la propiedad 'impuesto' de cada producto
productos.forEach(producto => {
  const impuesto = producto?.detalles?.impuesto;
  console.log(impuesto); // undefined, null o el valor real
});

En este ejemplo, el encadenamiento opcional nos permite evitar errores al intentar acceder a producto.detalles.impuesto, incluso si detalles es null o está ausente.

¿Cómo mejora tu código?

Evita errores de acceso a propiedades nulas o indefinidas.
Simplifica el código, haciendo que las verificaciones de seguridad sean más limpias y legibles.
Permite trabajar con datos inciertos o incompletos, algo muy común cuando trabajas con respuestas de APIs o bases de datos.

Bonus: Encadenamiento opcional con funciones

El encadenamiento opcional también se puede usar con funciones, lo cual es muy útil cuando tienes funciones que pueden no estar definidas en un objeto:

const usuario = { nombre: 'Juan', obtenerEdad: null };
const edad = usuario.obtenerEdad?.();
console.log(edad); // undefined

Aquí, la función obtenerEdad no está definida (es null), pero no se produce un error, simplemente retorna undefined.

9. Usa `async/await` para manejo de asincronía

Cuando trabajas con operaciones asíncronas en JavaScript, como obtener datos desde una API o leer archivos, la sintaxis de async/await puede ser tu mejor amiga. En lugar de usar promesas con .then() y .catch(), async/await permite escribir código asíncrono de manera más limpia y legible, similar a cómo escribiríamos código sincrónico.

¿Por qué usar `async/await`?

Simplicidad y legibilidad: Evitas las "cadenas de promesas" que pueden volverse complicadas de leer y mantener.
Manejo de errores más intuitivo: Usar try/catch para manejar errores es mucho más claro que usar .catch().
Control más preciso: Permite usar await en cualquier parte de la función, lo que facilita el control de flujos asíncronos más complejos.

Ejemplo básico de uso:

Supongamos que estamos trabajando con una API que devuelve datos. Usar async/await en lugar de .then() hace que el flujo sea mucho más fácil de seguir:

async function obtenerDatos() {
  try {
    const respuesta = await fetch('https://api.ejemplo.com/datos');
    if (!respuesta.ok) {
      throw new Error('Error al obtener los datos');
    }
    const datos = await respuesta.json();
    console.log(datos);
  } catch (error) {
    console.error('Error:', error.message);
  }
}

Ejemplo práctico: obteniendo datos de una API y mostrando en la UI

Imagina que tienes una página web donde necesitas mostrar información de usuarios de una API. Aquí hay un ejemplo de cómo podrías hacerlo usando async/await para obtener los datos y renderizarlos en la interfaz:

// Función para obtener y mostrar los datos de usuarios
async function obtenerUsuarios() {
  try {
    const respuesta = await fetch('https://api.ejemplo.com/usuarios');
    if (!respuesta.ok) {
      throw new Error('No se pudieron cargar los usuarios');
    }
    const usuarios = await respuesta.json();
    mostrarUsuariosEnUI(usuarios);
  } catch (error) {
    console.error('Hubo un problema con la carga de los usuarios:', error);
    alert('Error al cargar los usuarios. Intenta más tarde.');
  }
}

// Función para renderizar usuarios en el HTML
function mostrarUsuariosEnUI(usuarios) {
  const contenedor = document.getElementById('contenedor-usuarios');
  contenedor.innerHTML = usuarios.map(usuario => `
    <div class="usuario">
      <h3>${usuario.nombre}</h3>
      <p>Email: ${usuario.email}</p>
    </div>
  `).join('');
}

// Llamada a la función para obtener y mostrar los usuarios
obtenerUsuarios();

¿Qué mejoramos con `async/await`?

Manejo claro de errores: Usamos try/catch para capturar cualquier error que pueda ocurrir durante la obtención de datos, ya sea un problema con la red o con la API.
Código más legible: La estructura de await hace que el flujo del código se lea de manera secuencial, como si fuera código sincrónico.
Evita el anidamiento: Con async/await puedes evitar los callbacks anidados (el famoso "callback hell") y las promesas encadenadas.

Usar async/await no solo mejora la calidad de tu código, sino que también hace que sea mucho más fácil depurar y mantener proyectos a largo plazo. ¡Es una herramienta poderosa que deberías incorporar siempre que trabajes con asincronía en JavaScript!

10. Métodos modernos para objetos

Cuando trabajamos con objetos en JavaScript, es común que necesitemos iterar sobre las claves y los valores, o incluso extraer solo las claves o valores. Los métodos modernos como Object.entries(), Object.values() y Object.keys() hacen que estas tareas sean mucho más fáciles y legibles.

`Object.keys()`

Este método devuelve un array con todas las claves de un objeto. Es útil cuando solo necesitas acceder a las claves y no a los valores.

Ejemplo:

const obj = { a: 1, b: 2, c: 3 };
const claves = Object.keys(obj);
console.log(claves); // ["a", "b", "c"]

`Object.values()`

Devuelve un array con todos los valores de las propiedades de un objeto. Perfecto cuando solo necesitas los valores sin las claves.

Ejemplo:

const obj = { a: 1, b: 2, c: 3 };
const valores = Object.values(obj);
console.log(valores); // [1, 2, 3]

`Object.entries()`

Este es el método más versátil. Devuelve un array de arrays, donde cada sub-array contiene una clave y su valor correspondiente. Esto es útil si deseas trabajar tanto con claves como con valores en una sola operación.

Ejemplo:

const obj = { a: 1, b: 2, c: 3 };
Object.entries(obj).forEach(([clave, valor]) => {
  console.log(`La clave ${clave} tiene el valor ${valor}`);
});

Bonus: Iteración con `for...of`

¿Sabías que puedes combinar estos métodos con for...of para hacer tu código aún más limpio? Aquí te dejo un ejemplo usando Object.entries():

Ejemplo:

const obj = { a: 1, b: 2, c: 3 };
for (const [clave, valor] of Object.entries(obj)) {
  console.log(`La clave ${clave} tiene el valor ${valor}`);
}

Este enfoque es más limpio y fácil de leer, especialmente si estás trabajando con objetos grandes o complejos.

11. Usa `Map` para claves no primitivas

Cuando necesitas asociar valores a claves que no sean cadenas o símbolos, utiliza Map. Es más robusto y mantiene el tipo y el orden de las claves.

Ejemplo:

const mapa = new Map();
const clave = { id: 1 };
mapa.set(clave, 'valor');
console.log(mapa.get(clave)); // 'valor'

12. Utiliza `Symbol` para claves únicas

Los Symbol son una característica de JavaScript que permite crear claves únicas e inmutables, lo que las convierte en una herramienta poderosa cuando necesitamos asegurarnos de que un valor no sea sobrescrito o accesible accidentalmente. Los símbolos no pueden ser accedidos mediante métodos como Object.keys(), for...in, o JSON.stringify(), lo que los hace perfectos para valores privados o "ocultos".

¿Por qué usar `Symbol`?

Cuando creamos propiedades de un objeto utilizando claves como cadenas de texto, estas pueden ser fácilmente manipuladas o sobrescritas. Sin embargo, los símbolos garantizan que cada clave sea única, incluso si creamos símbolos con el mismo nombre. Además, los símbolos no aparecerán en las enumeraciones de propiedades del objeto.

Ejemplo básico:

const obj = {};
const claveOculta = Symbol('oculta');
obj[claveOculta] = 'valor secreto';
console.log(obj[claveOculta]); // 'valor secreto'

En este ejemplo, la clave claveOculta es única, y aunque otra parte de nuestro código pudiera haber creado otro Symbol('oculta'), este sería completamente distinto y no afectaría el valor almacenado en obj.

Ejemplo avanzado: Combinando `Symbol` con `Object.defineProperty`

Puedes incluso usar Symbol junto con Object.defineProperty para agregar propiedades a objetos de manera más controlada, asegurando que las propiedades sean no enumerables.

const claveSecreta = Symbol('secreta');
const obj = {};

Object.defineProperty(obj, claveSecreta, {
  value: 'información confidencial',
  enumerable: false,  // La propiedad no será enumerable
  writable: false,    // La propiedad no será modificable
});

console.log(obj[claveSecreta]);  // 'información confidencial'
console.log(Object.keys(obj));   // []

En este ejemplo, claveSecreta no aparecerá en la enumeración de claves del objeto, lo que lo hace ideal para valores "privados" que no deben ser accesibles o modificados por accidente.

Consideraciones:

Los Symbol son útiles para evitar conflictos de nombres de propiedades, especialmente cuando trabajas con bibliotecas de terceros o APIs.
Aunque los símbolos no son estrictamente "privados", el hecho de que no sean accesibles de manera convencional ayuda a proteger la integridad de los datos.
Ten en cuenta que los símbolos no se pueden serializar a JSON, por lo que si necesitas transmitir datos, asegúrate de manejar las propiedades Symbol de manera adecuada.

13. Ten cuidado con JSON y números grandes

En JavaScript, manejar números grandes puede ser un verdadero reto. El tipo de dato Number tiene un límite para representar enteros de manera precisa: el mayor valor entero seguro es 9007199254740991 (también conocido como Number.MAX_SAFE_INTEGER). Si intentas trabajar con números mayores que este, puedes perder precisión, lo que podría generar errores en tu aplicación.

Por ejemplo, imagina que recibes un número grande de una API externa:

console.log(
  JSON.parse('{"id": 9007199254740999}')
); 
// Salida: { id: 9007199254741000 } (precisión perdida)

Como ves, el número 9007199254740999 se convierte incorrectamente en 9007199254741000. Esto puede ser problemático si el número es crítico para tu aplicación, como un identificador único o un monto financiero.

¿Cómo evitar este problema?

Una solución sencilla y elegante es usar el tipo de dato BigInt, introducido en ECMAScript 2020. BigInt puede manejar números mucho más grandes sin perder precisión. Sin embargo, JSON no maneja de forma nativa BigInt, por lo que necesitarás convertir los números a cadenas al serializarlos y luego volver a convertirlos cuando los deserialices.

Aquí te dejo un ejemplo de cómo podrías hacerlo:

Solución con BigInt y JSON.stringify

const data = { id: 9007199254740999n }; // Usa BigInt para manejar el número grande
console.log(
  JSON.stringify(data, (key, value) => {
    if (typeof value === 'bigint') {
      return value.toString(); // Convierte BigInt a cadena
    }
    return value;
  })
);
// Salida: {"id":"9007199254740999"}

Al usar este enfoque, puedes mantener la precisión de los números grandes sin perder datos importantes. Cuando necesites el número de nuevo, solo conviértelo de nuevo a BigInt:

const parsedData = JSON.parse('{"id":"9007199254740999"}', (key, value) => {
  if (key === 'id') {
    return BigInt(value); // Convierte la cadena a BigInt
  }
  return value;
});
console.log(parsedData.id); // Salida: 9007199254740999n

Otras estrategias

Si no quieres trabajar con BigInt o si el rendimiento es una preocupación, otra estrategia es simplemente tratar los números grandes como cadenas en JSON. Esto evita el problema de precisión al costo de tener que hacer conversiones en tu código.

Ejemplo:

const data = { id: '9007199254740999' }; // Almacena el número como cadena
console.log(data.id); // Usa la cadena directamente cuando sea necesario

¿Por qué es importante?

El manejo adecuado de números grandes no solo es crucial para la precisión de los cálculos, sino también para mantener la integridad de los datos. Esto es especialmente importante cuando trabajas con APIs de terceros o sistemas que no controlas completamente. Un número mal interpretado podría llevar a fallos en tu aplicación, o lo que es peor, errores en los datos que podrían ser críticos, como el manejo de transacciones financieras o identificadores únicos en bases de datos.

Recuerda: no ignores los límites de precisión. Aunque puede parecer un detalle pequeño, es un área donde las aplicaciones pueden fallar de manera inesperada y costosa.

14. Maneja expresiones en sentencias `if` de forma explícita

En JavaScript, las sentencias if convierten implícitamente las expresiones en valores "truthy" o "falsy", lo que puede generar resultados inesperados si no se tiene en cuenta este comportamiento. Aunque este comportamiento puede ser útil en ocasiones, se recomienda ser explícito en la comparación para evitar errores sutiles y mejorar la legibilidad del código.

¿Qué significa "truthy" o "falsy"?

"Falsy" se refiere a valores que se consideran equivalentes a false cuando se evalúan en una expresión condicional. Ejemplos: 0, "" (cadena vacía), null, undefined, NaN.
"Truthy" son todos los valores que no son falsy, es decir, cualquier valor que no sea uno de los anteriores. Ejemplo: cualquier número diferente de 0, cualquier cadena no vacía, los objetos, etc.

Ejemplo implícito (puede dar resultados inesperados)

const value = 0; // Aquí el valor es 0, que es "falsy"
if (value) {
  console.log('Esto no se ejecutará porque 0 es "falsy".');
}

En el ejemplo anterior, la condición no se ejecuta, ya que 0 se considera "falsy". Sin embargo, este comportamiento puede ser difícil de detectar cuando se trabaja con valores más complejos.

Ejemplo explícito (mejor para la legibilidad)

const value = 0;
// Comprobación explícita para asegurarse de que value no sea 0
if (value !== 0) {
  console.log('Esto se ejecutará solo si value no es 0.');
} else {
  console.log('Esto se ejecutará porque value es 0.');
}

Consejo: Siempre que estés tratando con valores que puedan ser falsy, como 0, null, false o "", es mejor ser explícito en tu comparación. De esta manera, garantizas que la lógica se ejecute de acuerdo con tus expectativas y no por el comportamiento implícito de coerción de tipos.

Otro ejemplo con valores ambiguos

Consideremos que tienes un objeto que puede ser null, un arreglo vacío [], o un objeto vacío {}. Si haces algo como esto:

const obj = [];
if (obj) {
  console.log('El objeto es truthy');
} else {
  console.log('El objeto es falsy');
}

Aunque [] (un arreglo vacío) es un objeto válido y "truthy", puede llevar a confusión en el futuro si no entiendes bien el comportamiento. En vez de depender de la coerción implícita, lo mejor es hacer comparaciones más explícitas, como:

const obj = [];
if (obj !== null && obj.length > 0) {
  console.log('El objeto no está vacío');
} else {
  console.log('El objeto está vacío o es nulo');
}

¿Por qué es importante?

Al definir las condiciones de forma explícita, reduces el riesgo de errores causados por la coerción automática de JavaScript. Este enfoque hace que tu código sea más claro, legible y predecible. Además, mejora la mantenibilidad, ya que otras personas (o tú mismo en el futuro) podrán entender rápidamente la lógica sin tener que recordar el comportamiento implícito de los valores falsy en JavaScript.

15. Usa igualdad estricta (`===`) siempre que sea posible

Uno de los comportamientos más confusos de JavaScript proviene del operador de igualdad no estricta (==). Este operador realiza lo que se conoce como coerción de tipos, lo que significa que intenta convertir los valores a un tipo común antes de compararlos. Esto puede producir resultados sorprendentemente inesperados y muy difíciles de depurar.

Por ejemplo:

console.log([] == ![]); // true (sorprendente y poco intuitivo)

Esto es el tipo de cosa que puede volverte loco cuando estás desarrollando. El operador == compara [] (un arreglo vacío) con ![] (que resulta ser false, ya que [] se considera un valor verdadero y ![] lo convierte a false). Sin embargo, por las reglas internas de coerción de JavaScript, este es un resultado válido, aunque no tiene sentido a primera vista.

¿Por qué ocurre esto?

JavaScript convierte ambos lados de la comparación a un tipo común antes de compararlos. En este caso, el arreglo vacío [] se convierte en false al ser comparado con el valor booleano de ![]. Este tipo de coerción es un ejemplo claro de cómo pueden ocurrir errores sutiles y difíciles de identificar.

Consejo: Usa siempre la igualdad estricta

Para evitar estos problemas, siempre que sea posible, debes usar igualdad estricta (===). La diferencia es que este operador no realiza coerción de tipos. Esto significa que compara tanto el valor como el tipo de las variables de manera estricta.

console.log([] === ![]); // false (como se espera)

Ejemplos más típicos

Aquí te dejo algunos ejemplos más comunes de cómo la igualdad no estricta (==) puede ser problemática:

console.log(0 == '');  // true (porque 0 se convierte a '' antes de la comparación)
console.log(0 === ''); // false (porque 0 y '' son de tipos diferentes)

console.log(false == 'false'); // false (comparación de tipo booleano con cadena)
console.log(false === 'false'); // false (diferente tipo y valor)

console.log(null == undefined); // true (pero no son lo mismo, aunque lo pasen con `==`)
console.log(null === undefined); // false (compara tipo y valor, y son distintos)

¿Por qué es importante usar `===`?

Predicción y confiabilidad: Usar === te da comparaciones más predecibles, sin sorpresas ni conversiones de tipos.
Evita errores difíciles de detectar: Cuando tu código comienza a ser más grande y complejo, los errores relacionados con la coerción de tipos pueden ser muy difíciles de encontrar y depurar.
Mejora la legibilidad del código: Es más fácil para otros desarrolladores (o para ti mismo en el futuro) entender tu código cuando ves comparaciones explícitas, sin la confusión de las conversiones implícitas.

Mejores Prácticas en JavaScript Moderno - Parte 1

Juan — Sun, 01 Dec 2024 23:17:47 +0000

JavaScript es, sin duda, el lenguaje de programación más utilizado en el mundo y tiene una enorme influencia en una de las tecnologías más importantes de nuestra vida diaria: internet. Con este poder viene una gran responsabilidad, y el ecosistema de JavaScript ha estado evolucionando rápidamente, haciendo difícil mantenerse al día con las mejores prácticas.

En este artículo, exploraremos algunas de las principales mejores prácticas en JavaScript moderno para escribir un código más limpio, mantenible y eficiente.

1. Las reglas del proyecto son lo más importante

Cada proyecto puede tener reglas específicas para mantener la coherencia del código. Estas reglas siempre tendrán prioridad sobre cualquier recomendación externa, incluso sobre las de este artículo. Antes de implementar una práctica en un proyecto, asegúrate de que esté alineada con las reglas establecidas y que todos los miembros del equipo estén de acuerdo.

2. Usa JavaScript actualizado

JavaScript ha evolucionado enormemente desde su creación en 1995. Muchas prácticas antiguas que encuentras en internet pueden estar desactualizadas. Antes de implementar una técnica, verifica que sea compatible con la versión actual del lenguaje.

3. Usa `let` y `const` en lugar de `var`

Aunque var sigue siendo válido, su uso es considerado obsoleto y, en muchos casos, puede introducir errores difíciles de rastrear debido a su alcance funcional. En cambio, let y const nos brindan un alcance más predecible y seguro, al estar limitados al bloque donde se declaran.

¿Cuándo usar `let` y cuándo usar `const`?

Usa const siempre que una variable no cambie su referencia o valor. Esto hace que tu código sea más fácil de entender y reduce errores al proteger valores inmutables.
Usa let si necesitas reasignar el valor de la variable en el futuro, pero solo en los casos en que sea necesario.

Regla de oro: Usa const por defecto. Si más adelante necesitas cambiar el valor, cambia a let.

Ejemplos prácticos

const para valores constantes:

const PI = 3.14159;
console.log(PI); // 3.14159

PI = 3; // TypeError: Assignment to constant variable.

let para valores que cambian:

let count = 0;

for (let i = 1; i <= 3; i++) {
  count += i; 
}
console.log(count); // 6

Comparativa del alcance (let vs var):

if (true) {
  let blockScoped = "Solo dentro del bloque";
  var functionScoped = "Disponible fuera también";
}

console.log(functionScoped); // "Disponible fuera también"
console.log(blockScoped); // ReferenceError: blockScoped is not defined

Evita problemas con bucles y callbacks:

Con var puedes tener comportamientos inesperados en bucles, sobre todo en funciones asincrónicas:

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 3, 3, 3
}

Mientras que let soluciona esto:

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 0, 1, 2
}

Reemplazar var con let y const no solo es una buena práctica, sino que también ayuda a que tu código sea más seguro, más legible y más fácil de depurar. Haz que el futuro tú te lo agradezca.

4. Opta por Clases: Simplicidad en JavaScript

El uso de Function.prototype para la programación orientada a objetos en JavaScript es un enfoque más antiguo y a menudo propenso a errores. Por el contrario, las clases introducidas en ES6 ofrecen una sintaxis más intuitiva y cercana a otros lenguajes orientados a objetos, facilitando la legibilidad y el mantenimiento del código.

Ejemplo con clases (moderno y claro):

class Persona {
  constructor(nombre) {
    this.nombre = nombre;
  }

  obtenerNombre() {
    return this.nombre;
  }
}

const persona = new Persona('Juan');
console.log(persona.obtenerNombre()); // 'Juan'

Comparación con Function.prototype (complicado y menos intuitivo):

function Persona(nombre) {
  this.nombre = nombre;
}

Persona.prototype.obtenerNombre = function () {
  return this.nombre;
};

const persona = new Persona('Juan');
console.log(persona.obtenerNombre()); // 'Juan'

Como puedes ver, el enfoque basado en prototype requiere más pasos para definir métodos y puede resultar más confuso para desarrolladores menos experimentados. Las clases no solo son más fáciles de leer, sino que también promueven un código más limpio y modular.

¿Por qué usar clases?

Más legibles y menos propensas a errores.
Facilitan la herencia con extends y el uso de super.
Más compatibles con herramientas modernas y estándares de ES6+.

5. Usa Campos Privados Reales en JavaScript

Durante mucho tiempo, los desarrolladores de JavaScript usaron convenciones como un guion bajo (_) para simular campos privados en las clases. Sin embargo, esto era solo una convención visual, ya que las propiedades seguían siendo accesibles desde fuera de la clase. Ahora, gracias a los campos privados reales, podemos garantizar que ciertas propiedades sean completamente inaccesibles desde el exterior.

⚠️ Atención: Esta característica puede que no este disponible en la consola de algunos navegadores.

¿Por qué usar campos privados reales?

Encapsulación auténtica: Protegen tus datos y aseguran que no puedan ser accedidos ni modificados fuera del contexto de la clase.
Legibilidad: Al usar el prefijo #, queda claro qué propiedades son privadas, mejorando la comprensión del código.
Seguridad de datos: Evitan errores accidentales o accesos no intencionados a propiedades internas.

Ejemplo básico:

class Persona {
  #nombre; // Campo privado

  constructor(nombre) {
    this.#nombre = nombre;
  }

  obtenerNombre() {
    return this.#nombre;
  }
}

const persona = new Persona('Juan');
console.log(persona.obtenerNombre()); // 'Juan'

// El siguiente código lanzará un error porque el campo es privado
console.log(persona.#nombre); // SyntaxError: Private field '#nombre' must be declared in an enclosing class

Ejemplo avanzado: contadores protegidos

Imagina que quieres crear una clase que registre el número de visitas a una página, pero no deseas que nadie pueda manipular ese contador directamente.

class Pagina {
  #visitas; // Campo privado

  constructor() {
    this.#visitas = 0;
  }

  registrarVisita() {
    this.#visitas++;
  }

  obtenerVisitas() {
    return this.#visitas;
  }
}

const pagina = new Pagina();
pagina.registrarVisita();
pagina.registrarVisita();
console.log(pagina.obtenerVisitas()); // 2

// Intentar acceder al contador desde fuera genera un error
console.log(pagina.#visitas); // SyntaxError: Private field '#visitas' must be declared in an enclosing class

En este caso, el contador #visitas está completamente protegido de accesos externos, lo que garantiza que su valor no sea manipulado de manera indebida.

Consideraciones

Los campos privados no pueden ser accedidos ni por subclases.
Si necesitas interactuar con datos privados en herencias, considera usar métodos protegidos (protected) en lugar de campos privados.

6. Usa funciones flecha

Las funciones flecha son una forma moderna y elegante de escribir funciones en JavaScript. Ofrecen una sintaxis más corta y, a diferencia de las funciones tradicionales, heredan automáticamente el contexto de this, lo que evita problemas comunes en programación orientada a objetos.

Son especialmente útiles en funciones de orden superior como map, filter y reduce, donde necesitamos pasar funciones como argumentos.

¿Por qué usar funciones flecha?

Sintaxis más corta y limpia: Ideal para mantener el código más legible.
Contexto de this automático: Perfecto para evitar errores en callbacks o métodos.
Uso ideal en funciones inline: Como las que utilizamos en map, filter o eventos.

Ejemplos prácticos

1. Con `map` para transformar arrays

const numeros = [1, 2, 3];
const dobles = numeros.map(num => num * 2);
console.log(dobles); // [2, 4, 6]

2. Con `filter` para filtrar elementos

const edades = [15, 22, 30, 12];
const mayoresDeEdad = edades.filter(edad => edad >= 18);
console.log(mayoresDeEdad); // [22, 30]

3. Con `reduce` para sumar valores

const precios = [10, 20, 30];
const total = precios.reduce((acumulado, precio) => acumulado + precio, 0);
console.log(total); // 60

4. En eventos DOM (¡cuidado con el contexto!)

Cuando usamos funciones flecha en eventos, el contexto this no cambiará, lo cual puede ser útil:

class Boton {
  constructor(elemento) {
    this.elemento = elemento;
    this.elemento.addEventListener('click', () => {
      console.log(`¡Click detectado en ${this.elemento.id}!`);
    });
  }
}

const miBoton = new Boton(document.getElementById('miBoton'));

Consejo: cuándo no usarlas

Aunque las funciones flecha son geniales, no son ideales para todo. Evítalas en casos donde necesites acceder al propio contexto de la función, como en funciones que utilizan this dinámico o si necesitas escribir métodos en prototipos.

Ejemplo donde una función normal es mejor:

const objeto = {
  nombre: "Ejemplo",
  imprimir() {
    console.log(this.nombre); // "Ejemplo"
  }
};

objeto.imprimir();

Si cambiaras imprimir a una función flecha, perderías el contexto de this.

¡Vamos a mejorar esa sección! Agregué algo de contexto, una explicación más clara, y algunos ejemplos adicionales para que sea más completa y útil.

7. Operador de coalescencia nula (`??`)

El operador de coalescencia nula (??) es una alternativa más precisa al operador lógico || para asignar valores por defecto. Mientras que || considera "falsy" a valores como 0, false o "", el operador ?? solo evalúa null o undefined como valores "ausentes". Esto lo convierte en una opción más segura y específica en muchos casos.

¿Cuál es la diferencia clave?

Con ||, cualquier valor "falsy" será reemplazado por el valor por defecto.

Con ??, únicamente se reemplazan los valores que son null o undefined. Esto te permite mantener valores "falsy" como 0 o "" si son válidos en tu contexto.

Ejemplo básico:

const valor = 0;
const resultado = valor ?? 10;
console.log(resultado); // 0, porque `0` no es `null` ni `undefined`

En cambio, con ||:

const valor = 0;
const resultado = valor || 10;
console.log(resultado); // 10, porque `0` es "falsy"

Casos prácticos con `??`

Establecer valores predeterminados sin sobrescribir valores válidos:

const usuario = {
  nombre: '',
  edad: 0,
};

// Usando ?? para mantener valores válidos
const nombre = usuario.nombre ?? 'Anónimo';
const edad = usuario.edad ?? 18;

console.log(nombre); // ''
console.log(edad); // 0

Validar configuración opcional:

Supongamos que tienes un sistema que permite personalizar opciones:

function configurar(opciones) {
  const tema = opciones.tema ?? 'claro';
  const idioma = opciones.idioma ?? 'es';
  console.log(`Tema: ${tema}, Idioma: ${idioma}`);
}

configurar({ tema: 'oscuro' }); 
// Tema: oscuro, Idioma: es
configurar({ idioma: 'en' });  
// Tema: claro, Idioma: en

Evitar errores al trabajar con propiedades opcionales:

const configuracion = null;
const modo = configuracion?.modo ?? 'por defecto';
console.log(modo); // 'por defecto'

¿Que es solid y por que deberías utilizarlo?

Juan — Thu, 28 Nov 2024 22:47:02 +0000

Si alguna vez has trabajado en un proyecto de desarrollo que escaló rapidamente y se volvió muy difícil de manetener, sabras lo importante que es seguir convenciones y estandares para evitar dolores de cabeza. Aquí es donde entra SOLID.

¿Qué es SOLID?

SOLID es un acrónimo que representa cinco principios fundamentales del diseño orientado a objetos. Estos principios buscan mejorar la calidad del código, haciéndolo más fácil de entender, mantener y escalar. Cada letra en SOLID corresponde a un principio específico:

S: Single Responsibility Principle (Responsabilidad Única)
O: Open/Closed Principle (Abierto/Cerrado)
L: Liskov Substitution Principle (Sustitución de Liskov)
I: Interface Segregation Principle (Segregación de Interfaces)
D: Dependency Inversion Principle (Inversión de Dependencias)

Aplicar estos principios no solo mejora la estructura de tu código, sino que también ayuda a evitar errores comunes y facilita la colaboración dentro de un equipo.

Los principios de SOLID explicados

1. Principio de Responsabilidad Única (SRP)

Cada clase debe tener una única responsabilidad y razón para cambiar. En otras palabras, una clase debe enfocarse en hacer solo una cosa.

Ejemplo en PHP:

class User {
    public function saveToDatabase() {
        // Código para guardar un usuario en la base de datos
    }
}

Este ejemplo viola el principio porque la clase User mezcla lógica de negocio con operaciones de base de datos. Una mejor solución sería delegar la lógica de persistencia a otra clase.

Corregido:

class User {
    public string $name;
}

class UserRepository {
    public function save(User $user) {
        // Código para guardar un usuario en la base de datos
    }
}

2. Principio Abierto/Cerrado (OCP)

Las clases deben estar abiertas a la extensión, pero cerradas a la modificación. Esto significa que puedes añadir funcionalidades sin alterar el código existente.

Ejemplo:

interface PaymentMethod {
    public function pay(float $amount): void;
}

class PayPal implements PaymentMethod {
    public function pay(float $amount): void {
        // Lógica de pago con PayPal
    }
}

class CreditCard implements PaymentMethod {
    public function pay(float $amount): void {
        // Lógica de pago con tarjeta de crédito
    }
}

El uso de interfaces permite agregar nuevos métodos de pago sin cambiar la lógica central.

3. Principio de Sustitución de Liskov (LSP)

El principio de Sustitución de Liskov (LSP) establece que una subclase debe poder reemplazar a su clase base sin alterar el comportamiento esperado del programa. Esto significa que las subclases deben adherirse al contrato definido por la clase base, asegurando que cualquier instancia de la subclase funcione correctamente donde se espera una instancia de la clase base.

El objetivo principal de este principio es mantener la consistencia en la jerarquía de clases y evitar violaciones que puedan causar errores o comportamientos inesperados. Si una subclase introduce modificaciones que cambian el propósito o el comportamiento básico de la clase base, entonces no cumple con este principio.

Ejemplo práctico: Supongamos que tienes una clase base Bird con un método fly() que representa la habilidad de volar de un ave. Luego, creas una subclase Penguin, que hereda de Bird, pero los pingüinos no pueden volar. Si el programa espera que todas las instancias de Bird puedan usar el método fly(), la subclase Penguin rompería este comportamiento, violando el principio.

class Bird {
    public function fly(): string {
        return "Estoy volando";
    }
}

class Penguin extends Bird {
    public function fly(): string {
        throw new Exception("Los pingüinos no pueden volar");
    }
}

// Uso en el programa
function letBirdFly(Bird $bird) {
    echo $bird->fly();
}

$penguin = new Penguin();
letBirdFly($penguin); // Esto causa un error.

Solución: Rediseñar la jerarquía de clases

En lugar de asumir que todas las aves pueden volar, podemos redefinir la jerarquía de clases para representar mejor las características reales de cada tipo de ave. Podemos introducir una interfaz específica para aves que pueden volar, evitando la necesidad de que los pingüinos implementen un comportamiento que no poseen.

interface Flyable {
    public function fly(): string;
}

class Bird {
    public function eat(): string {
        return "Estoy comiendo";
    }
}

class Sparrow extends Bird implements Flyable {
    public function fly(): string {
        return "Estoy volando como un gorrión";
    }
}

class Penguin extends Bird {
    // No implementa Flyable
}

// Uso en el programa
function letFly(Flyable $bird) {
    echo $bird->fly();
}

$sparrow = new Sparrow();
letFly($sparrow); // Funciona correctamente

$penguin = new Penguin();
// letFly($penguin); // Esto no es posible porque Penguin no es Flyable

Beneficios del cumplimiento del LSP

Mayor coherencia: La jerarquía de clases refleja mejor la realidad, evitando suposiciones incorrectas sobre las capacidades de las subclases.
Reducción de errores: El programa no fallará debido a comportamientos inesperados introducidos por subclases que no cumplen con el contrato de la clase base.
Facilidad de mantenimiento: El código es más fácil de extender y modificar, ya que las subclases se integran sin alterar la lógica existente.

Cumplir con el principio de Sustitución de Liskov no solo mejora la calidad de tu diseño orientado a objetos, sino que también asegura que tu código sea robusto y confiable a medida que crece.

4. Principio de Segregación de Interfaces (ISP)

Es mejor tener varias interfaces pequeñas y específicas que una interfaz grande y general.

Ejemplo:

interface Flyable {
    public function fly();
}

interface Swimable {
    public function swim();
}

5. Principio de Inversión de Dependencias (DIP)

Los módulos de alto nivel no deben depender de los módulos de bajo nivel; ambos deben depender de abstracciones.

Ejemplo:

interface Logger {
    public function log(string $message);
}

class FileLogger implements Logger {
    public function log(string $message) {
        // Escribe el mensaje en un archivo
    }
}

class Application {
    private Logger $logger;

    public function __construct(Logger $logger) {
        $this->logger = $logger;
    }

    public function run() {
        $this->logger->log('La aplicación está corriendo');
    }
}

Esto permite cambiar la implementación del logger sin alterar la lógica principal de la aplicación.

¿Por qué deberías usar SOLID?

Mantenimiento: Código más limpio y fácil de modificar sin temor a romper otras partes del sistema.
Escalabilidad: Facilita la adición de nuevas funcionalidades sin grandes refactorizaciones.
Colaboración: Mejora la legibilidad y facilita el trabajo en equipo.
Pruebas: Las aplicaciones diseñadas con SOLID son más fáciles de probar.

Conclusión

Aplicar los principios SOLID puede parecer complejo al principio, pero su impacto a largo plazo es innegable. Adoptarlos no solo mejorará la calidad de tu código, sino que también te convertirá en un mejor desarrollador, capaz de crear aplicaciones robustas, escalables y fáciles de mantener.

setInterval vs setTimeout: ¿Cuál deberías usar?

Juan — Thu, 15 Aug 2024 22:54:07 +0000

Si has trabajado con JavaScript, seguro que en algún momento te has topado con setInterval y setTimeout. Estos dos métodos son como las herramientas mágicas para decirle a tu código cuándo hacer algo después de un tiempo o cada cierto intervalo. Pero, ¿cuándo deberías usar uno y no el otro? 🤔

¿Qué son `setTimeout` y `setInterval`?

Antes de decidir cuál usar, vale la pena recordar qué hace cada uno.

Imagina a setTimeout como una alarma que suena después de un tiempo. Le dices cuánto tiempo esperar y luego, boom, ejecuta la función. Pero solo lo hace una vez.

  setTimeout(() => {
      console.log("¡Hola después de 2 segundos!");
  }, 2000);

Aquí, ese "¡Hola!" aparece después de 2 segundos y luego se acabó, la función no se repite.

En el caso de setInterval es como una alarma que sigue sonando cada ciertos minutos hasta que la apagas. Le dices cuánto tiempo esperar entre repeticiones y sigue ejecutando la función hasta que tú le digas que pare.

  setInterval(() => {
      console.log("¡Hola cada 2 segundos!");
  }, 2000);

En este caso, el mensaje aparecerá cada 2 segundos, sin parar, hasta que detengas el intervalo con la función clearInterval.

¿Cuándo deberías usar `setTimeout`?

setTimeout es tu mejor amigo cuando quieres que algo pase solamente una vez, pero no inmediatamente. Aquí van algunas situaciones donde es súper útil:

Pequeñas pausas: Tal vez necesitas esperar unos segundos antes de ejecutar una animación, o tal vez quieres dar tiempo a que algo cargue antes de mostrarlo.
Procesos asíncronos: A veces necesitas esperar un poco antes de seguir con el siguiente paso en una operación compleja.

Así que, si solo necesitas un pequeño retraso antes de ejecutar algo una vez, setTimeout es tu opción.

¿Y qué pasa con `setInterval`?

setInterval es lo que quieres si necesitas que algo ocurra repetidamente, como un reloj que nunca deja de marcar. Aquí tienes algunos ejemplos donde setInterval brilla:

Relojes y temporizadores: Imagina un reloj que actualiza la hora cada segundo o un temporizador de cuenta regresiva.
Chequeos constantes: Verificar cada cierto tiempo si hay nuevos mensajes, actualizaciones, o si algo ha cambiado en tu aplicación.
Actualizaciones en tiempo real: Refrescar el contenido de una página con datos nuevos cada pocos segundos.

Si lo que necesitas es que algo siga ocurriendo a intervalos regulares, entonces setInterval es el indicado.

Un par de cosas sobre el rendimiento

Es importante mencionar que tanto setTimeout como setInterval no son infalibles. Si tu aplicación está muy ocupada, los temporizadores pueden retrasarse, especialmente si estás ejecutando muchas cosas al mismo tiempo. Y cuidado con setInterval, porque si lo que estás haciendo dentro de él tarda más que el intervalo que has fijado, las funciones se pueden empezar a acumular, y ahí es cuando empiezan los problemas.

Para evitar esto, algunos prefieren usar setTimeout de manera recursiva en lugar de setInterval, ya que así tienes más control sobre cuándo se ejecuta la siguiente función:

function ejecutarCada2Segundos() {
    console.log("¡Hola cada 2 segundos!");
    setTimeout(ejecutarCada2Segundos, 2000);
}

ejecutarCada2Segundos();

Pero si decides usar setInterval es fundamental saber cómo detener el intervalo para evitar que siga corriendo indefinidamente. Aquí es donde entra clearInterval. Este método te permite detener un intervalo activo. Aquí tienes un ejemplo sencillo:

const intervalo = setInterval(() => {
    console.log("¡Hola cada 2 segundos!");
}, 2000);

// Detener el intervalo después de 10 segundos
setTimeout(() => {
    clearInterval(intervalo);
    console.log("Intervalo detenido");
}, 10000);

En este ejemplo, el mensaje "¡Hola cada 2 segundos!" se repetirá durante 10 segundos. Después de ese tiempo, clearInterval se encarga de detener el intervalo, y el mensaje "Intervalo detenido" se muestra en la consola.

Entonces, ¿cuál uso?

En resumen, si necesitas que algo pase solo una vez después de un tiempo, setTimeout es el camino a seguir. Pero si quieres que algo se repita continuamente, opta por setInterval.

Ambos son herramientas poderosas en JavaScript, y saber cuándo usar cada una puede hacer que tu código sea más eficiente y fácil de manejar.

Axios: ¿Por que deberías usarlo en tu próximo proyecto?

Juan — Fri, 01 Mar 2024 23:23:46 +0000

Introducción: ¿Que es Axios?

En el mundo del desarrollo web, la comunicación cliente-servidor es fundamental y en ese sentido JavaScript juega un papel importante. Es aquí donde entra en juego Axios, una librería JavaScript que simplifica en gran medida el proceso de realizar solicitudes HTTP. Es un cliente http isomorfico, es decir que funciona tanto en el servidor como en el cliente, basado en promesas.

Esta libreria es compatible con la mayoria de navegadores y frameworks(como React o Angular). Ademas de tener un excelente soporte para trabajar con APIs RESTful y facilitar las pruebas y la manipulación de datos.

Instalación de Axios

Usando npm:

npm install axios

Usando un CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Peticiones con Axios

Con Axios, hacer una solicitud es tan sencillo como llamar a la funciones: get, post, put, delete. Y pasarle la URL del recurso al que deseamos acceder. Por ejemplo:

axios
  .get("/api/users")
  .then(function (response) {
    console.log("Datos de usuarios:", response.data);
  })
  .catch(function (error) {
    console.error("Error al obtener datos de usuarios:", error);
  });

Usualmente las funciones antes mencionadas reciben como primer parametro la URL del recurso y como segundo parametro la configuración de la petición, pero hay execpciones:

axios.get(url, config)

axios
  .get(`/api/users/${user_id}`)
  .then(function (response) {
    console.log("Datos de usuarios:", response.data);
  })
  .catch(function (error) {
    console.error("Error al obtener datos de usuarios:", error);
  });

axios.post(url, data, config)

// Definir los datos que se enviarán en la solicitud POST
const postData = {
  firstName: "John",
  lastName: "Doe",
  email: "john.doe@example.com",
};

// Realizar la solicitud POST
axios
  .post("/api/users", postData)
  .then(function (response) {
    // Manejar la respuesta exitosa
    console.log("Usuario creado:", response.data);
  })
  .catch(function (error) {
    // Manejar el error
    console.error("Error al crear usuario:", error);
  });

axios.put(url, data, config)

axios
  .put(`/api/users/${user_id}`, {
    email: "nuevo@email.com",
  })
  .then(function (response) {
    console.log("Usuario actualizado:", response.data);
  })
  .catch(function (error) {
    console.error("Error al actualizar usuario:", error);
  });

axios.delete(url, config)

axios
  .delete(`/api/users/${user_id}`)
  .then(function (response) {
    console.log("Usuario eliminado correctamente");
  })
  .catch(function (error) {
    console.error("Error al eliminar un usuario:", error);
  });

¿Que son los interceptores?

A menudo necesitamos realizar acciones adicionales antes o después de enviar o recibir una solicitud y aquí es donde entran en juego los interceptores de Axios.

Los interceptores en Axios son funciones que nos permiten interceptar y modificar solicitudes HTTP antes de que sean enviadas y después de que sean recibidas. Esto nos brinda la capacidad de agregar encabezados personalizados, transformar los datos de la solicitud o respuesta, manejar errores de manera centralizada y mucho más.

Interceptores de Solicitud (Request Interceptor)

El interceptor de solicitud nos permite realizar acciones antes de que la solicitud sea enviada al servidor. Algunos casos de uso comunes incluyen agregar encabezados personalizados, modificar los datos de la solicitud o realizar transformaciones en la misma, por ejemplo:

axios.interceptors.request.use(function (config) {
  // Agregamos dos encabezados muy tipicos y se enviaran en cada solicitud
  config.headers.Authorization = `Bearer ${token}`;
  config.headers["Content-Type"] = "application/json";
  return config;
});

Interceptor de Respuesta (Response Interceptor)

El interceptor de respuesta nos permite realizar acciones después de recibir una respuesta del servidor, pero antes de que la promesa se resuelva o rechace. Algunos casos de uso comunes incluyen transformar los datos de respuesta, manejar errores de manera centralizada o realizar operaciones de limpieza. Por ejemplo:

axios.interceptors.response.use(
  function (response) {
    // Retornamos la respues exitosa
    return response;
  },
  function (error) {
    // Manejamos el error
    if (error.response.status === 401) {
      // Redirigimos a la página de login si recibimos un error de autenticación
      window.location.href = "/login";
    }
    // Si es otro error inesperado, entoces lo retornamos
    return Promise.reject(error);
  }
);

Ventajas de Utilizar Interceptores

Centralización de la lógica: Los interceptores permiten centralizar la lógica de manejo de solicitudes y respuestas HTTP en un solo lugar, lo que facilita el mantenimiento y la organización del código.
Personalización de Solicitudes y Respuestas: Los interceptores nos brindan la flexibilidad para personalizar las solicitudes y respuestas según las necesidades específicas de nuestra aplicación.
Manejo de Errores Centralizado: Los interceptores de respuesta nos permiten manejar errores de manera centralizada, lo que facilita la implementación de lógica de manejo de errores coherente en toda la aplicación.

Instancias en Axios

Cuando trabajamos con solicitudes HTTP en nuestras aplicaciones, a menudo necesitamos configurar ciertos parámetros como la URL base o los encabezados de manera consistente en todas nuestras solicitudes. Para facilitar esta tarea, Axios nos proporciona la capacidad de crear instancias personalizadas con configuraciones específicas.

En Axios, una instancia es una versión personalizada de la biblioteca Axios que se puede configurar con opciones específicas. Esto nos permite tener múltiples instancias de Axios con diferentes configuraciones en una misma aplicación. Cada instancia puede tener su propia URL base, encabezados personalizados, tiempos de espera y más.

Para crear una instancia personalizada en Axios, utilizamos el método axios.create(). Este método nos permite crear una nueva instancia de Axios con configuraciones específicas que se aplicarán a todas las solicitudes realizadas con esa instancia. Por ejemplo:

const instancia = axios.create({
  baseURL: "https://tu-api.com/users",
  headers: {
    Authorization: `Bearer ${token}`,
  },
});

axios.get("/").then(function (response) {
  // Esta petición fue hecha a la url actual
  // Y no tiene cabezera de autorización
});

instancia.get("/").then(function (response) {
  // Mientras que esta petición fue hecha a https://tu-api.com/users
  // Y con la cabezera de autorización especificada en la configuración
});

Ejemplo práctico: Consulta a la API de JSONPlaceHolder

Para demostrar la utilidad de los interceptores y las instancias de Axios vamos a programar un codigo que use un recurso especifico de la API de JSONPlaceHolder.

Primero creamos una instancia de Axios llamada api con la url base del recurso y sus cabezeras. En este caso, vamos a consultar el recurso posts.

const api = axios.create({
  // Configuramos una instancia de Axios con la URL base de la API y los encabezados necesarios
  baseURL: "https://jsonplaceholder.typicode.com/posts", // URL base de la API
  headers: {
    Accept: "application/json", // Encabezados requeridos para recibir datos JSON
  },
});

Analizando el recurso que nos brinda JsonPlaceHolder podemos notar que todos los posts tinen las siguientes propiedades: userId, id, title y body. Es importante destacar que la solicitud devuelve los datos de los posts en objetos javascript, y que cuando son más de un post los agrupa a todos en un array. Como actualmente typeof en javascript no nos permite diferenciar entre un array y un objeto, crearemos una función auxiliar que lo haga por medio de los prototipos:

// Función auxiliar para obtener el tipo de dato de una variable
function getType(value) {
  const prototype = Object.prototype.toString.call(value);
  return prototype.split(" ").pop().slice(0, -1).toLowerCase();
} // Esto retorna "array", "object", "string", "number", "null", "function" ó "boolean"

Teniendo en cuenta lo anterior y usando la función auxiliar que acabamos de crear vamos a extraer de la respuesta los datos que nos interesan, por ejemplo, solo el titulo y el cuerpo de los posts. Para esto vamos a usar un interceptor de respuesta, si la respuesta es un objeto entonces la api solamente nos retorno un post pero si la respuesta es un array entonces la api nos habrá retornado más de uno.

// Interceptor de respuesta de Axios
api.interceptors.response.use(function (response) {
  // Este interceptor se ejecuta antes de que se resuelvan las promesas devueltas por las solicitudes
  const data = response.data;
  // Verificamos el tipo de datos devueltos por la API
  if (getType(data) === "array") {
    // Si la respuesta es un array, formateamos cada elemento del array
    return data.map(post => ({
      title: post.title, // Extraemos el título del post
      body: post.body, // Extraemos el cuerpo del post
    }));
  }

  if (getType(data) === "object") {
    // Si la respuesta es un objeto, formateamos el objeto
    return {
      title: data.title, // Extraemos el título del post
      body: data.body, // Extraemos el cuerpo del post
    };
  }

  // Si la respuesta no es ni un array ni un objeto, la devolvemos sin cambios
  return response;
});

Y con esos simples pasos, ya podemos hacer consultas a la api de manera sencilla, sabiendo el tipo de dato que retornarán las promesas mientras no ocurra ningún error en la consulta. Por ejemplo:

// Solicitar todos los posts
api.get("/").then(posts => {
  console.log(`Hay ${posts.length} posts`); // Imprimimos la cantidad de posts en la consola
  console.log(`El primer post es "${posts[0].title}"`); // E imprimos el titulo del primer post en el arreglo
});

// Solicitar un post específico
api.get("/1").then(post => {
  // Manejamos la respuesta de la solicitud de un post específico
  console.log(`${post.title}: ${post.body}`); // Imprimir el título y el cuerpo del post en la consola
});

Y por si fuera poco: lo que hicimos anteriormente es facilmente encapsulable. Podrías envolver la instancia ya sea en otro objeto(Creando metodos especificos que hagan las consultas y manejen los errores) o en un hook de React.

Eventos en Javascript

Juan — Mon, 10 Jul 2023 19:36:14 +0000

¿Que son los eventos?

Un evento en JavaScript es una acción que ocurre dentro de un elemento de la página web. Puede ser desencadenado por el usuario, como hacer clic en un enlace, o generado automáticamente por el navegador, como la carga completa de la página. Los eventos son la base de la interactividad en JavaScript y nos permiten crear respuestas y comportamientos personalizados.

Uso basico de los eventos

Para utilizar eventos en JavaScript, se utiliza el método addEventListener. Este método permite asociar una función (conocida como "manejador de eventos") a un elemento HTML y especificar qué evento se debe escuchar. La función se ejecutará automáticamente cuando ocurra el evento especificado.

const boton = document.querySelector('#mi-boton');

function manejarClic() {
  console.log('¡Se hizo clic en el botón!');
}

boton.addEventListener('click', manejarClic);

En este ejemplo, seleccionamos el botón con el identificador mi-boton utilizando document.querySelector. Luego, definimos la función manejarClic, que simplemente imprime un mensaje en la consola. Finalmente, llamamos a addEventListener en el botón y le pasamos el evento 'click' y la función manejarClic como argumentos. Ahora, cada vez que el usuario haga clic en el botón, se ejecutará la función manejarClic.

Existen numerosos tipos de eventos en JavaScript que se pueden utilizar para interactuar con el usuario. Algunos ejemplos de eventos comunes incluyen:

📌 Eventos de ratón: como 'click', 'mouseover' (cuando el cursor se sitúa sobre un elemento), 'mouseout' (cuando el cursor sale de un elemento) y 'mousemove' (cuando el cursor se mueve dentro de un elemento).

📌 Eventos de teclado: como 'keydown' (cuando una tecla se presiona), 'keyup' (cuando una tecla se suelta) y 'keypress' (cuando se mantiene presionada una tecla).

📌 Eventos de formulario: como 'submit' (cuando se envía un formulario) y 'input' (cuando el contenido de un campo de entrada cambia).

Estos son solo algunos ejemplos, pero existen muchos más tipos de eventos que se pueden utilizar según las necesidades de tu aplicación web.

Eventos en elementos HTML

Para capturar y manejar eventos, JavaScript proporciona varios métodos y enfoques. Uno de los métodos más comunes es el uso de addEventListener(). Este método permite registrar una función que se ejecutará cuando ocurra un evento específico en un elemento HTML.

La sintaxis básica de addEventListener() es:

function manejarEvento(event) {
  // Código para manejar el evento
}

elemento.addEventListener(evento, manejarEvento);

La función manejarEvento puede tener cualquier nombre, pero es una buena práctica utilizar un nombre descriptivo que refleje la acción que realiza. El parámetro event es opcional y representa el objeto de evento que se genera cuando ocurre el evento. Este objeto contiene información sobre el evento y sus propiedades pueden ser utilizadas en el código de la función.

Objeto event

El objeto event es una parte fundamental del manejo de eventos en JavaScript. Cuando ocurre un evento, como hacer clic en un elemento o presionar una tecla, se genera un objeto event que contiene información relevante sobre el evento en sí. Este objeto proporciona datos sobre el tipo de evento, el elemento objetivo y otros detalles que son útiles para manejar y responder a la interacción del usuario.

Algunas propiedades clave del objeto event incluyen:

📌 event.type: Indica el tipo de evento que ha ocurrido, como "click", "keydown" o "submit".
📌 event.target: Hace referencia al elemento HTML en el que se originó el evento. Es especialmente útil cuando se trabaja con eventos delegados o se desea acceder a la información del elemento interactivo.
📌 event.preventDefault(): Método que se utiliza para evitar el comportamiento predeterminado del evento. Por ejemplo, se puede utilizar para anular el envío de un formulario o evitar que un enlace se abra.

Estas son solo algunas de las propiedades y métodos más comunes que se pueden encontrar en el objeto event. Dependiendo del tipo de evento y del contexto en el que se utiliza, pueden existir otras propiedades disponibles para acceder a información adicional.

PD: La imagen que uso en la portada de este post pertenece a este articulo en el cual me inspire para escribir.

¿Como tener un setup funcional?

Juan — Tue, 27 Jun 2023 22:34:45 +0000

Objetivo del post

El objetivo principal de este post es brindar información y consejos sobre cómo configurar un setup funcional. No solo nos centraremos en aspectos técnicos, sino también en aquellos elementos que contribuyen a crear un entorno de trabajo cómodo y libre de molestias.

Organiza tu área de trabajo

La organización área de trabajo es un factor crucial para tener un setup funcional. Un espacio de trabajo bien organizado te permite tener todo lo que necesitas al alcance de la mano y reduce las distracciones innecesarias. Aquí hay algunos consejos para ayudarte a organizar eficientemente tu área de trabajo:

📌 Despeja el desorden: Antes de comenzar a organizar tu área de trabajo, es importante despejar el desorden. Retira cualquier objeto o equipo que no estés utilizando actualmente. Elimina papeles innecesarios, envoltorios de alimentos y cualquier otra cosa que pueda distraerte o dificultar tu concentración.

📌 Crea zonas funcionales: Divide tu espacio de trabajo en zonas funcionales. Por ejemplo, puedes tener una zona para tu ordenador y monitor, otra para tu libreta de notas y materiales de referencia, etc... Esto te permite tener un flujo de trabajo más fluido y evita que tus elementos se mezclen y se conviertan en un desorden caótico.

📌 Gestiona los cables: Los cables sueltos pueden ser un desorden. Utiliza clips de cables, organizadores de cables o canaletas para mantener los cables ordenados y evitar enredos. También puedes etiquetar los cables para identificar rápidamente cuál es cuál.

📌 Mantén un escritorio limpio: Un escritorio limpio y despejado crea un ambiente de trabajo más agradable. Asegúrate de tener suficiente espacio libre en tu escritorio para colocar tu ordenador, monitor, teclado y otros elementos esenciales.

Recuerda que la organización de tu área de trabajo es un proceso continuo. A medida que adquieras nuevos elementos o cambies tus necesidades, es importante ajustar y adaptar tu organización. Tómate el tiempo necesario para mantener tu área de trabajo organizada y libre de desorden, y notarás cómo esto mejora tu enfoque, eficiencia y experiencia general al programar.

La iluminación es importante

La iluminación adecuada en tu área de trabajo es fundamental para mantener una buena salud ocular y prevenir la fatiga visual. Se recomienda contar con iluminación directa sobre tu espacio de trabajo, preferiblemente a través de una lámpara de escritorio ajustable o una lámpara de pie con luz direccionable.

Evita la luz demasiado brillante o tenue, y busca una iluminación suave y difusa que no cause reflejos molestos en la pantalla. Una luz brillante y uniforme te ayudará a mantener la alerta y a evitar la somnolencia durante tus sesiones de programación.

La temperatura del color de la luz es importante. Se recomienda una luz blanca o ligeramente cálida para crear un ambiente de trabajo activo y estimulante.

Aprovecha la luz natural siempre que sea posible, ubicando tu área de trabajo cerca de una ventana para permitir su entrada durante el día.

En general, una iluminación adecuada en tu setup de programación contribuye a reducir la fatiga visual, mejorar la concentración y mantener un estado de ánimo óptimo.

Decoración y elementos extras

Agregar elementos decorativos y naturaleza a nuestro entorno puede tener un impacto positivo en nuestro estado de ánimo, creatividad y concentración. Algunas ideas para acondicionar un espacio de trabajo:

📌 Plantas: Además de añadir un toque de verde, las plantas también ayudan a reducir el estrés y aumentar la concentración. Opta por plantas de interior de bajo mantenimiento, como cactus, suculentas o helechos, que requieren poca atención.

📌 Cuadros y posters: Colgar cuadros oposters relacionados con tus metas personales o profesionales puede ser una excelente fuente de inspiración.

📌 Iluminación ambiental: Considera agregar una lámpara de luz con diferentes tonos y niveles de intensidad. Además de proporcionar una iluminación suave y relajante, también puedes ajustarla para adaptarse a tus preferencias y necesidades.

📌 Elementos de confort: No te olvides de incluir elementos que te brinden comodidad durante largas sesiones de trabajo. Un cojín ergonómico para el respaldo de la silla, una manta suave o incluso una taza de café favorita pueden marcar la diferencia en tu experiencia de programación.

Técnicas para evaluar el rendimiento de tu código

Juan — Fri, 16 Jun 2023 01:37:23 +0000

Funciones de temporización para medir el rendimiento

Una forma útil y sencilla de evaluar el rendimiento de tu código JavaScript es utilizar las funciones de temporización proporcionadas por la consola del navegador. Estas funciones te permiten medir el tiempo de ejecución de secciones específicas de tu código y obtener información precisa sobre su rendimiento. Dos de las funciones más comunes para esto son console.time() y console.timeEnd().

La función console.time() te permite iniciar un temporizador que registra el tiempo de ejecución de un bloque de código. Para usarla, simplemente debes pasarle un nombre único como argumento. Por ejemplo:

console.time('miTiempo');

Una vez que hayas llamado a console.time() y ejecutado el código que deseas medir, puedes utilizar la función console.timeEnd() para detener el temporizador y obtener el tiempo transcurrido. Al igual que console.time(), debes pasarle el mismo nombre como argumento. Por ejemplo:

console.timeEnd('miTiempo');

Para medir el rendimiento de un bloque de código, envuelve dicho bloque entre las llamadas a console.time() y console.timeEnd(). Esto registrará el tiempo transcurrido entre las dos llamadas. Aquí tienes un ejemplo:

console.time('miTiempo');
// Código a medir
console.timeEnd('miTiempo');

Después de ejecutar este código, verás en la consola del navegador el tiempo transcurrido en milisegundos entre las dos llamadas. Esta información te permitirá evaluar la eficiencia y el rendimiento de esa sección específica de tu código.

Recuerda que puedes utilizar múltiples temporizadores para medir diferentes secciones de tu código y comparar su rendimiento relativo. Asegúrate de utilizar nombres únicos para cada temporizador para evitar confusiones.

Las funciones de temporización console.time() y console.timeEnd() son herramientas valiosas para evaluar el rendimiento de tu código JavaScript de manera rápida y sencilla. Aprovecha estas funciones para identificar posibles cuellos de botella y áreas que requieren optimización.

Acceso al Profiler a través de las herramientas de desarrollo del navegador

Una de las herramientas más poderosas para evaluar y mejorar el rendimiento del código JavaScript es el Profiler (o perfilador) integrado en las herramientas de desarrollo de los navegadores modernos. El Profiler te permite analizar el rendimiento de tu código en detalle, identificar cuellos de botella y áreas de mejora. A continuación, te mostraremos cómo acceder a esta valiosa herramienta:

Google:

Abre Google Chrome y navega hasta la página web que deseas analizar.
Haz clic derecho en cualquier parte de la página y selecciona la opción "Inspeccionar" en el menú contextual. También puedes acceder al panel de herramientas de desarrollo presionando la tecla F12.
En la ventana de las herramientas de desarrollo, ve a la pestaña "Performance" o "Rendimiento" (puede variar según la versión de Chrome).
Haz clic en el botón de grabación (un círculo rojo) para iniciar la grabación del rendimiento.
Ejecuta las acciones o la sección de código que deseas evaluar.
Detén la grabación haciendo clic nuevamente en el botón de grabación.
Analiza los resultados proporcionados por el Profiler para identificar áreas problemáticas y oportunidades de mejora.

Firefox:

Abre Mozilla Firefox y navega hasta la página web que deseas analizar.
Haz clic derecho en cualquier parte de la página y selecciona la opción "Inspeccionar elemento" en el menú contextual. También puedes acceder al panel de herramientas de desarrollo presionando la combinación de teclas Ctrl+Shift+I (Windows/Linux) o Command+Option+I (Mac).
En la ventana de las herramientas de desarrollo, ve a la pestaña "Performance" o "Rendimiento" (puede variar según la versión de Firefox).
Haz clic en el botón de grabación (un círculo rojo) para iniciar la grabación del rendimiento.
Ejecuta las acciones o la sección de código que deseas evaluar.
Detén la grabación haciendo clic nuevamente en el botón de grabación.
Analiza los resultados proporcionados por el Profiler para identificar áreas problemáticas y oportunidades de mejora.

Otros:

La mayoría de los navegadores modernos, como Safari, Microsoft Edge y Opera, también ofrecen herramientas de desarrollo con funcionalidades similares al Profiler. Para acceder a ellas, sigue pasos similares a los mencionados anteriormente, como hacer clic derecho en la página y seleccionar "Inspeccionar elemento" o utilizar combinaciones de teclas específicas.

Es importante destacar que cada navegador puede tener su propia interfaz y características específicas para el Profiler. Te recomiendo explorar y familiarizarte con las herramientas de desarrollo de tu navegador preferido para aprovechar al máximo sus capacidades de evaluación de rendimiento.

Uso del Profiler para analizar y mejorar el rendimiento

Grabación y análisis del rendimiento

Inicia la grabación del rendimiento haciendo clic en el botón de grabación o "Start Profiling" en el Profiler. A partir de este momento, el Profiler comenzará a recopilar datos sobre el rendimiento de tu código.
Ejecuta el código que deseas analizar. Puedes ejecutar acciones específicas, interactuar con tu aplicación o recorrer diferentes escenarios para obtener una visión completa del rendimiento.
Detén la grabación del rendimiento haciendo clic en el botón de detener o "Stop Profiling". A continuación, el Profiler generará un informe detallado sobre el rendimiento de tu código durante el período de grabación.
Analiza el informe generado por el Profiler. Presta atención a las funciones y secciones de código que consumen más tiempo de ejecución. Identifica los cuellos de botella, las llamadas excesivas o ineficientes, y las oportunidades de optimización.

Identificación de áreas de mejora

Durante el análisis del informe del Profiler, presta atención a las siguientes métricas y características que te ayudarán a identificar áreas de mejora:

Tiempo de ejecución: Identifica las funciones o secciones de código que consumen más tiempo de ejecución. Estas pueden ser candidatas para optimización.
Llamadas excesivas: Observa si hay funciones que se llaman repetidamente sin necesidad. Reducir las llamadas innecesarias puede mejorar el rendimiento.
Renderizado: Si tu código involucra manipulación del DOM o actualización de la interfaz de usuario, verifica si hay operaciones de renderizado costosas o innecesarias.
Uso de memoria: Evalúa el consumo de memoria de tu código y busca posibles fugas de memoria o ineficiencias en la gestión de los recursos.

Optimización y prueba iterativa

Una vez que hayas identificado las áreas de mejora en tu código, implementa las optimizaciones correspondientes. Esto puede implicar la simplificación de algoritmos, la reducción de llamadas innecesarias, la optimización de la manipulación del DOM u otras técnicas específicas para mejorar el rendimiento.

Después de aplicar las optimizaciones, vuelve a ejecutar el código y graba el rendimiento nuevamente. Compara los nuevos informes con los anteriores para evaluar el impacto de tus mejoras. Realiza pruebas iterativas hasta que estés satisfecho con los resultados y hayas logrado un rendimiento óptimo.

5 trucos de JavaScript para optimizar el rendimiento

Juan — Thu, 15 Jun 2023 00:41:50 +0000

Truco 1: Minimizar el uso de variables globales

El uso excesivo de variables globales puede afectar negativamente el rendimiento de tu código JavaScript. Las variables globales se almacenan en el objeto global y están disponibles en todo tu código, lo que significa que pueden ser accedidas y modificadas desde cualquier parte de tu aplicación. Esto puede aumentar la complejidad y disminuir la legibilidad de tu código.

Para evitar este problema, es recomendable minimizar el uso de variables globales en tu código JavaScript. En su lugar, utiliza variables locales o pasalas como parámetros a tus funciones. De esta manera, limitas el alcance de tus variables y haces que sea más fácil razonar sobre tu código.

Aquí tienes un ejemplo de cómo reducir el uso de variables globales en tu código JavaScript:

// Variable global
var nombre = "Juan";

function saludar() {
  // Variable local
  var saludo = "Hola";

  console.log(saludo + " " + nombre);
}

saludar();

En este ejemplo, la variable nombre es una variable global y está disponible en todo el código. La variable saludo es una variable local y sólo está disponible dentro de la función saludar(). Al limitar el alcance de la variable saludo, mejoramos la legibilidad y mantenibilidad de nuestro código.

Truco 2: Utilizar variables locales para evitar el reevaluado de elementos del DOM

Cuando se trabaja con elementos del DOM en JavaScript, es importante tener en cuenta que acceder a ellos puede ser costoso en términos de rendimiento. Cada vez que se accede a un elemento del DOM, el navegador debe recorrer el árbol de elementos para encontrarlo, lo que puede ser muy lento.

Una forma de mejorar el rendimiento es almacenar los elementos del DOM en variables locales. De esta manera, se evita tener que recorrer el árbol de elementos cada vez que se accede a ellos. En lugar de eso, se accede a la variable local, lo que es mucho más rápido.

// Ejemplo de código
// Acceder a un elemento del DOM varias veces sin almacenarlo en una variable local
for (let i = 0; i < 1000; i++) {
  document.getElementById("mi-elemento").style.color = "red";
}

// Almacenar el elemento del DOM en una variable local para acceder a él más rápido
const miElemento = document.getElementById("mi-elemento");
for (let i = 0; i < 1000; i++) {
  miElemento.style.color = "red";
}

Como se puede ver en el ejemplo de código anterior, al acceder al elemento del DOM varias veces sin almacenarlo en una variable local, se está recorriendo el árbol de elementos cada vez. En cambio, al almacenar el elemento del DOM en una variable local, se accede a él directamente y se evita el recorrido del árbol de elementos.

Este truco puede ser especialmente útil en situaciones en las que se accede a un mismo elemento del DOM varias veces, como en ciclos o eventos de repetición. Almacenar los elementos del DOM en variables locales puede ayudar a reducir el tiempo de procesamiento y mejorar el rendimiento de la aplicación.

Espero que este truco te sea útil para optimizar el rendimiento de tus aplicaciones JavaScript. ¡Prueba a utilizarlo y comprueba la diferencia de velocidad!

Truco 3: Evitar el uso de bucles anidados

El uso de bucles anidados puede hacer que tu código JavaScript sea más lento. Si tienes bucles anidados, especialmente bucles for anidados, es probable que estés haciendo que tu código sea menos eficiente.

Una técnica común para evitar los bucles anidados es utilizar el método reduce() en lugar de un bucle for anidado. reduce() permite combinar los elementos de una matriz en un solo valor mediante una función reductora.

Veamos un ejemplo de código:

// Ejemplo de bucles for anidados
const numeros = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
let suma = 0;

for (let i = 0; i < numeros.length; i++) {
  for (let j = 0; j < numeros[i].length; j++) {
    suma += numeros[i][j];
  }
}

console.log(suma); // Salida: 45

// Ejemplo de uso de reduce()
const numeros = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

const sumaInterna = (acumuladorInterno, valorActualInterno) => {
  return acumuladorInterno + valorActualInterno;
}

const suma = numeros.reduce((acumulador, valorActual) => {
  return acumulador + valorActual.reduce(sumaInterna, 0);
}, 0);

console.log(suma); // Salida: 45

En el ejemplo anterior, utilizamos el método reduce() para calcular la suma de todos los elementos de una matriz anidada en lugar de utilizar bucles for anidados. La función reductora recorre cada elemento de la matriz y los suma en el acumulador.

Si tienes que trabajar con matrices grandes, evita los bucles anidados siempre que sea posible. Utiliza otras técnicas para reducir el número de bucles y mejorar el rendimiento de tu código.

Truco 4: Utilizar funciones en lugar de bucles para manipular arrays

Al manipular arrays en JavaScript, es común utilizar bucles para recorrerlos y realizar operaciones en sus elementos. Sin embargo, en muchas ocasiones, es posible utilizar funciones de alto nivel que realizan estas operaciones de forma más eficiente.

Un ejemplo común es el uso de forEach() en lugar de un bucle for para recorrer un array y realizar una operación en cada elemento. La función forEach() es más legible y fácil de usar que un bucle for, y además suele ser más rápida en la mayoría de los casos.

// Ejemplo con bucle for
const numeros = [1, 2, 3, 4, 5];
for (let i = 0; i < numeros.length; i++) {
  numeros[i] = numeros[i] * 2;
}

// Ejemplo con forEach()
const numeros = [1, 2, 3, 4, 5];
numeros.forEach((numero, index, array) => {
  array[index] = numero * 2;
});

En este ejemplo, tanto el bucle for como forEach() multiplican cada elemento del array numeros por 2. Sin embargo, forEach() es más conciso y fácil de leer que el bucle for, y además es más eficiente en términos de rendimiento.

Otras funciones de alto nivel que pueden ser útiles para manipular arrays incluyen map(), filter(), reduce(), some(), y every(). Estas funciones se utilizan comúnmente en lugar de bucles para realizar operaciones más complejas en arrays.

En general, al utilizar funciones en lugar de bucles para manipular arrays, se puede mejorar el rendimiento del código y hacerlo más legible y fácil de mantener.

Truco 5: Utilizar operaciones de incremento y decremento en lugar de operaciones de suma y resta

Otro truco sencillo para mejorar el rendimiento de tu código en JavaScript es utilizar operaciones de incremento y decremento en lugar de operaciones de suma y resta. Esto se debe a que las operaciones de incremento y decremento son más eficientes en términos de velocidad de ejecución que las operaciones de suma y resta.

Por ejemplo, en lugar de escribir:

let i = 0;
i = i + 1;

Puedes escribir:

let i = 0;
i++;

Y en lugar de escribir:

let i = 0;
i = i - 1;

Puedes escribir:

let i = 0;
i--;

Estas operaciones de incremento y decremento son especialmente útiles en bucles y otras estructuras de control de flujo que se ejecutan muchas veces. Al utilizar operaciones de incremento y decremento en lugar de operaciones de suma y resta, puedes optimizar el rendimiento de tu código y hacer que se ejecute más rápido.

DEV Community: Juan

Astro: La elección ideal para sitios web

Rendimiento excepcional: La arquitectura de "Islas"

Flexibilidad total: componentes de múltiples frameworks

Diseño impecable con Shadcn UI

Escalabilidad real: de MVP a producción

Optimización SEO y experiencia de desarrollo placentera

Casos de uso ideales: Donde Astro brilla

Conclusión: Astro, mi herramienta favorita

5 Funciones de CSS que deberías conocer

1. calc(): Realiza cálculos directamente en tu CSS ​​📏

Ejemplo sin calc():

Ejemplo con calc():

2. repeat(): Simplifica la creación de grids 💡

Ejemplo sin repeat():

Ejemplo con repeat():

3. min(): Controla el tamaño máximo dinámico 🤏

Ejemplo sin min():

Ejemplo con min():

4. clamp(): Control total del tamaño en diseños responsivos

Ejemplo sin clamp():

Ejemplo con clamp():

5. fit-content(): Ajusta el ancho al contenido

Ejemplo sin fit-content():

Ejemplo con fit-content():

Bases de Datos Serverless: Por qué Turso Está Cambiando el Juego

¿Qué es una base de datos serverless?

Turso: Rendimiento Extremo y Escalabilidad Global

Características claves de Turso

Por qué Turso es una Revolución

Casos de Uso Destacados

Aplicaciones Web en Tiempo Real

Comercio Electrónico Global

Aplicaciones Móviles Escalables

Análisis y Generación de Informes

Conclusión

Mejores Prácticas en JavaScript Moderno - Parte 2

8. Encadenamiento opcional (?.)

¿Por qué es útil?

Ejemplo básico

Ejemplo con un objeto más complejo

¿Cómo mejora tu código?

Bonus: Encadenamiento opcional con funciones

9. Usa async/await para manejo de asincronía

¿Por qué usar async/await?

Ejemplo básico de uso:

Ejemplo práctico: obteniendo datos de una API y mostrando en la UI

¿Qué mejoramos con async/await?

10. Métodos modernos para objetos

Object.keys()

Object.values()

Object.entries()

Bonus: Iteración con for...of

11. Usa Map para claves no primitivas

12. Utiliza Symbol para claves únicas

¿Por qué usar Symbol?

Ejemplo básico:

Ejemplo avanzado: Combinando Symbol con Object.defineProperty

Consideraciones:

13. Ten cuidado con JSON y números grandes

Solución con BigInt y JSON.stringify

Otras estrategias

¿Por qué es importante?

14. Maneja expresiones en sentencias if de forma explícita

¿Qué significa "truthy" o "falsy"?

Ejemplo implícito (puede dar resultados inesperados)

Ejemplo explícito (mejor para la legibilidad)

Otro ejemplo con valores ambiguos

¿Por qué es importante?

15. Usa igualdad estricta (===) siempre que sea posible

¿Por qué ocurre esto?

Consejo: Usa siempre la igualdad estricta

Ejemplos más típicos

¿Por qué es importante usar ===?

Mejores Prácticas en JavaScript Moderno - Parte 1

1. Las reglas del proyecto son lo más importante

2. Usa JavaScript actualizado

3. Usa let y const en lugar de var

¿Cuándo usar let y cuándo usar const?

Ejemplos prácticos

1. calc(): Realiza cálculos directamente en tu CSS 📏

8. Encadenamiento opcional (`?.`)

9. Usa `async/await` para manejo de asincronía

¿Por qué usar `async/await`?

¿Qué mejoramos con `async/await`?

`Object.keys()`

`Object.values()`

`Object.entries()`

Bonus: Iteración con `for...of`

11. Usa `Map` para claves no primitivas

12. Utiliza `Symbol` para claves únicas

¿Por qué usar `Symbol`?

Ejemplo avanzado: Combinando `Symbol` con `Object.defineProperty`

14. Maneja expresiones en sentencias `if` de forma explícita

15. Usa igualdad estricta (`===`) siempre que sea posible

¿Por qué es importante usar `===`?

3. Usa `let` y `const` en lugar de `var`

¿Cuándo usar `let` y cuándo usar `const`?

1. Con `map` para transformar arrays

2. Con `filter` para filtrar elementos

3. Con `reduce` para sumar valores

7. Operador de coalescencia nula (`??`)

Casos prácticos con `??`

¿Qué son `setTimeout` y `setInterval`?

¿Cuándo deberías usar `setTimeout`?

¿Y qué pasa con `setInterval`?