Forem: Joan Peramás Ceras

Neumorphism: What It Is and CSS Examples

Joan Peramás Ceras — Wed, 16 Oct 2024 16:25:40 +0000

In recent years, UI design has seen the emergence of various trends, one of which is Neumorphism. This design trend combines soft, inset styles with a modern aesthetic, creating an illusion of depth and layering. In this post, we will explore the principles of Neumorphism, its benefits and drawbacks, and provide practical examples with CSS code snippets to help you implement this trendy design in your own projects.

What is Neumorphism?

Neumorphism, short for "new skeuomorphism", is a design approach that uses soft shadows and highlights to create a three-dimensional appearance. Unlike the traditional skeuomorphic design, which mimics real-world objects, Neumorphism aims for a more subtle, modern feel. It relies heavily on light and shadow to create a sense of depth, often employing a monochromatic color palette.

Key Characteristics of Neumorphism

Soft Shadows: Neumorphic elements typically have both inner and outer shadows that create a soft, lifted appearance.
Monochromatic Color Schemes: Using similar shades for the background and elements creates a seamless look.
Minimalist Aesthetic: Neumorphism often embraces minimalism, focusing on simplicity and usability.
Interactive Feedback: Hover and active states often involve changing shadows or colors to provide feedback to users.

Advantages of Neumorphism

Aesthetic Appeal: Neumorphism can create visually interesting interfaces that engage users.
Depth Perception: The use of shadows gives a sense of layering, improving the overall user experience.
Encourages Interaction: The visual cues can make users more inclined to interact with UI elements.

Challenges of Neumorphism

Accessibility Issues: The low contrast and subtle design may not be easily perceivable for all users, particularly those with visual impairments.
Overuse: Excessive use of Neumorphism can lead to visual clutter and can make interfaces harder to navigate.
Performance: Heavy shadow effects can impact performance, especially in mobile devices.

CSS Examples of Neumorphism

Let’s dive into some practical CSS examples to help you create Neumorphic UI components.

Neumorphic Button

<button class="neumorphic-button">Click Me</button>

body {
    background-color: #e0e0e0; /* Light background */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.neumorphic-button {
    padding: 15px 30px;
    border-radius: 12px;
    border: none;
    background: #e0e0e0; /* Same as body color */
    box-shadow: 8px 8px 15px #a3b1c6,
                -8px -8px 15px #ffffff; /* Soft shadows */
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.neumorphic-button:hover {
    box-shadow: 4px 4px 10px #a3b1c6,
                -4px -4px 10px #ffffff; /* Change shadows on hover */
}

Neumorphic Card

<div class="neumorphic-card">
    <h2>Neumorphic Card</h2>
    <p>This is an example of a neumorphic card.</p>
</div>

body {
    background-color: #e0e0e0; /* Light background */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.neumorphic-card {
    padding: 20px;
    border-radius: 15px;
    background: #e0e0e0;
    box-shadow: 10px 10px 20px #a3b1c6,
                -10px -10px 20px #ffffff; /* Neumorphic shadows */
    width: 300px;
    text-align: center;
    transition: all 0.3s ease;
}

.neumorphic-card:hover {
    box-shadow: 5px 5px 15px #a3b1c6,
                -5px -5px 15px #ffffff; /* Lighter shadows on hover */
}

Neumorphic Input Field

<input type="text" class="neumorphic-input" placeholder="Type something...">

body {
    background-color: #e0e0e0; /* Light background */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.neumorphic-input {
    padding: 10px;
    border-radius: 10px;
    border: none;
    background: #e0e0e0;
    box-shadow: inset 6px 6px 10px #a3b1c6,
                inset -6px -6px 10px #ffffff; /* Inner shadows for depth */
    width: 300px;
    transition: all 0.3s ease;
}

.neumorphic-input:focus {
    box-shadow: inset 4px 4px 8px #a3b1c6,
                inset -4px -4px 8px #ffffff; /* Adjust shadows on focus */
}

Neumorphic Toggle Switch

<div class="neumorphic-toggle">
    <input type="checkbox" id="toggle" />
    <label for="toggle">Toggle</label>
</div>

body {
    background-color: #e0e0e0; /* Light background */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.neumorphic-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.neumorphic-toggle input {
    display: none; /* Hide the checkbox */
}

.neumorphic-toggle label {
    padding: 10px;
    border-radius: 20px;
    background: #e0e0e0;
    box-shadow: 6px 6px 12px #a3b1c6,
                -6px -6px 12px #ffffff;
    position: relative;
    transition: all 0.3s ease;
}

.neumorphic-toggle input:checked + label {
    box-shadow: inset 6px 6px 12px #a3b1c6,
                inset -6px -6px 12px #ffffff;
    background: #d1d1d1;
}

App to Create Websites Embracing Neumorphism in Design

A design tool that allows you to create neumorphic designs and export them as CSS:

Visit Neumorphism.io

Conclusion

Neumorphism is a captivating design trend that offers a fresh perspective on UI design, emphasizing depth and interactivity. While it has its advantages, including aesthetic appeal and user engagement, designers must also be cautious of its accessibility and usability challenges. By implementing the CSS examples provided, you can start creating Neumorphic interfaces that are not only modern and visually appealing but also functional and user-friendly.

As with any design trend, always consider the target audience and ensure that your interface remains accessible to all users. Happy designing!

Exploring JavaScript's Modern Primitives: BigInt and Symbol

Joan Peramás Ceras — Mon, 14 Oct 2024 16:23:06 +0000

In the ever-evolving world of JavaScript, new features are introduced to tackle the limitations of the language and provide developers with more robust tools to build their applications. Two such features are the BigInt and Symbol primitives, both introduced in ECMAScript 2015 (ES6) and later. These types bring new capabilities to JavaScript, allowing developers to handle large integers and create unique identifiers with ease.

Understanding BigInt

The BigInt type in JavaScript is designed to represent whole numbers larger than the safe integer limit of the Number type, which is (2^{53} - 1). The BigInt type allows you to work with numbers beyond this limit without losing precision, making it ideal for use cases in cryptography, scientific computation, and financial applications.

Creating BigInt Values

Creating a BigInt is straightforward. You can use the n suffix for literals or the BigInt constructor for strings or numbers:

// Using the 'n' suffix
const bigInt1 = 1234567890123456789012345678901234567890n;

// Using the BigInt constructor
const bigInt2 = BigInt("1234567890123456789012345678901234567890");

BigInt Operations

You can perform arithmetic operations with BigInt just like with regular numbers, but with some caveats. Operations between BigInt and Number require explicit conversion:

const bigInt = 100000000000000000000n;
const num = 2;

// Addition
const sum = bigInt + BigInt(num); // 100000000000000000002n

// Multiplication
const product = bigInt * 3n; // 300000000000000000000n

// Division
const quotient = bigInt / 2n; // 50000000000000000000n

Considerations for BigInt

No Mixing Types: You must explicitly convert between BigInt and Number.
No Decimals: BigInt is strictly for whole numbers.
Performance: Operations may be slower than those with Number due to overhead.
JSON Compatibility: BigInt cannot be directly serialized to JSON.

Understanding Symbol

The Symbol type in JavaScript represents a unique and immutable value that can be used as an identifier for object properties. Symbols are especially useful in scenarios where property keys need to be unique or when you want to add metadata to objects without risking property name collisions.

Creating Symbols

Symbols are created using the Symbol() function. Each call returns a unique symbol:

const sym1 = Symbol();
const sym2 = Symbol('description');

console.log(sym1 === sym2); // false

Using Symbols in Objects

Symbols are often used as keys for object properties, offering a form of private property:

const sym = Symbol('mySymbol');

const myObject = {
  [sym]: 'value'
};

console.log(myObject[sym]); // 'value'

Symbols do not appear in standard property enumeration:

console.log(Object.keys(myObject)); // []
console.log(Object.getOwnPropertySymbols(myObject)); // [ Symbol(mySymbol) ]

Well-Known Symbols

JavaScript includes well-known symbols that allow you to modify behavior of built-in operations:

Symbol.iterator: Define custom iteration for objects.
Symbol.toPrimitive: Customize type conversion.
Symbol.toStringTag: Change the default string description.

Example of custom iteration:

const myIterable = {
  *[Symbol.iterator]() {
    yield 1;
    yield 2;
    yield 3;
  }
};

for (const value of myIterable) {
  console.log(value); // 1, 2, 3
}

Global Symbol Registry

Symbols can be shared using the global symbol registry with Symbol.for() and Symbol.keyFor():

const globalSym1 = Symbol.for('globalSymbol');
const globalSym2 = Symbol.for('globalSymbol');

console.log(globalSym1 === globalSym2); // true
console.log(Symbol.keyFor(globalSym1)); // 'globalSymbol'

Conclusion

The BigInt and Symbol primitives significantly enhance JavaScript's capabilities, offering solutions for handling large integers and creating unique property keys. By understanding and leveraging these modern primitives, developers can write more robust and flexible code, avoiding potential pitfalls associated with traditional data types. Whether you're dealing with large numerical values or need unique identifiers, these features can be indispensable tools in your JavaScript toolkit.

Optimistic UI: Mejora la experiencia de usuario en tus aplicaciones frontend

Joan Peramás Ceras — Thu, 22 Aug 2024 17:39:20 +0000

En el desarrollo frontend, uno de los retos más grandes es ofrecer una experiencia de usuario fluida y rápida. Los usuarios modernos esperan aplicaciones que respondan de inmediato, sin demoras ni interrupciones. Aquí es donde entra en juego el concepto de Optimistic UI.

¿Qué es Optimistic UI?

Optimistic UI, o Interfaz de Usuario Optimista, es una técnica de desarrollo en la que la aplicación asume inmediatamente el éxito de una acción del usuario y actualiza la interfaz en consecuencia, incluso antes de recibir la confirmación del servidor.

Ventajas de Optimistic UI

- Mejora la experiencia de usuario: Al reducir el tiempo de espera percibido, la aplicación se siente más rápida y reactiva.
- Aumenta la interactividad: Los usuarios pueden continuar interactuando con la aplicación sin interrupciones.
- Reducción de la fricción: Minimiza la frustración del usuario al no tener que esperar a que las acciones se completen.

Implementación de Optimistic UI

Para ilustrar cómo implementar Optimistic UI, vamos a considerar un ejemplo común: una aplicación de tareas donde los usuarios pueden añadir y eliminar elementos de una lista.

Paso 1: Actualización optimista de la UI

Primero, actualizamos la interfaz de usuario inmediatamente después de que el usuario realice una acción, como añadir una nueva tarea.

const addTask = async (newTask) => {
  // Actualización optimista de la UI
  setTasks([...tasks, newTask]);

  try {
    // Enviar la nueva tarea al servidor
    await api.addTask(newTask);
  } catch (error) {
    // Revertir la UI en caso de error
    setTasks(tasks);
    console.error('Error al añadir la tarea:', error);
  }
};

Paso 2: Manejo de errores

Es crucial manejar posibles errores del servidor y revertir la UI en caso de que algo salga mal.

const addTask = async (newTask) => {
  const previousTasks = [...tasks];

  // Actualización optimista de la UI
  setTasks([...tasks, newTask]);

  try {
    // Enviar la nueva tarea al servidor
    await api.addTask(newTask);
  } catch (error) {
    // Revertir la UI en caso de error
    setTasks(previousTasks);
    console.error('Error al añadir la tarea:', error);
  }
};

Paso 3: Sincronización con el servidor

En algunos casos, puede ser necesario sincronizar el estado de la UI con el servidor después de realizar varias acciones optimistas.

const syncTasksWithServer = async () => {
  try {
    const serverTasks = await api.getTasks();
    setTasks(serverTasks);
  } catch (error) {
    console.error('Error al sincronizar las tareas con el servidor:', error);
  }
};

// Llamada a la función de sincronización en intervalos regulares o en ciertos eventos
useEffect(() => {
  const interval = setInterval(syncTasksWithServer, 60000);
  return () => clearInterval(interval);
}, []);

Casos de uso para Optimistic UI

Optimistic UI es especialmente útil en aplicaciones donde la latencia del servidor puede afectar la experiencia del usuario:

Aplicaciones de mensajería: Enviar mensajes sin esperar la confirmación del servidor.
Sistemas de gestión de contenido: Editar y publicar contenido sin demoras.
Plataformas de comercio electrónico: Añadir o quitar productos del carrito de compras de manera instantánea.

Conclusión

Optimistic UI es una técnica poderosa que puede transformar la experiencia de usuario en tus aplicaciones, haciéndolas más rápidas y fluidas. Aunque requiere un manejo cuidadoso de errores y sincronización, los beneficios superan con creces los desafíos.

Maximizando la Eficiencia con TypeScript Utilities

Joan Peramás Ceras — Thu, 14 Mar 2024 15:44:40 +0000

En el mundo del desarrollo frontend, TypeScript se ha convertido en una herramienta invaluable para mejorar la calidad y la seguridad del código JavaScript. Una de las características más poderosas de TypeScript es su capacidad para proporcionar utilidades que facilitan la creación y manipulación de tipos de datos de manera más eficiente y precisa.

1. ¿Qué son las utilidades de TypeScript?

Las utilidades de TypeScript son una colección de tipos predefinidos que vienen incluidos con el lenguaje y que permiten a los desarrolladores realizar operaciones comunes relacionadas con los tipos de una manera más concisa y legible. Estas utilidades están diseñadas para simplificar tareas repetitivas y reducir la posibilidad de errores al trabajar con tipos en TypeScript.

Algunas de las utilidades más comunes incluyen Partial, que convierte todas las propiedades de un tipo en opcionales; Readonly, que hace que todas las propiedades de un tipo sean de solo lectura; y Record, que crea un tipo con un conjunto fijo de claves y tipos de valores. Estas utilidades, junto con muchas otras que ofrece TypeScript, pueden ayudar a los desarrolladores a escribir código más robusto, seguro y mantenible en sus aplicaciones frontend.

En las siguientes secciones de este artículo, exploraremos algunas de estas utilidades en más detalle, proporcionando ejemplos prácticos de su uso y destacando cómo pueden mejorar significativamente el flujo de trabajo de desarrollo frontend.

2. Utilidades Básicas:

Las utilidades básicas de TypeScript ofrecen herramientas fundamentales para simplificar tareas comunes relacionadas con la manipulación de tipos de datos. Estas utilidades son fáciles de entender y aplicar, lo que las convierte en herramientas indispensables para cualquier desarrollador frontend.

`Partial<T>`:

La utilidad Partial<T> es especialmente útil cuando necesitas trabajar con objetos donde solo algunas propiedades son requeridas, mientras que otras son opcionales. Al aplicar Partial<T> a un tipo T, todas las propiedades de T se vuelven opcionales en el nuevo tipo.

interface Usuario {
    nombre: string;
    edad: number;
    email: string;
}

function actualizarUsuario(usuario: Partial<Usuario>) {
    // Lógica para actualizar usuario
}

// Uso
actualizarUsuario({ nombre: 'Juan' }); // Solo actualiza el nombre

`Readonly<T>`:

La utilidad Readonly<T> se utiliza para hacer que todas las propiedades de un objeto sean de solo lectura. Esto es útil cuando tienes objetos que no deberían ser modificados después de su creación.

interface Producto {
    id: number;
    nombre: string;
}

const producto: Readonly<Producto> = { id: 1, nombre: 'Camiseta' };

// Intento de modificar el objeto (error en tiempo de compilación)
producto.id = 2;

`Record<K, T>`:

La utilidad Record<K, T> crea un tipo cuyas claves son del tipo K y cuyos valores son del tipo T. Esto es útil cuando necesitas definir un objeto con un conjunto específico de claves y tipos de valores.

type Puntuaciones = Record<string, number>;

const puntuaciones: Puntuaciones = {
    jugador1: 100,
    jugador2: 150,
    jugador3: 80,
};

// Puntuaciones para nuevos jugadores pueden ser añadidas
puntuaciones['jugador4'] = 120;

3. Utilidades de Manipulación de Tipos:

Las utilidades de manipulación de tipos de TypeScript proporcionan herramientas avanzadas para crear tipos de datos más específicos y precisos. Estas utilidades son especialmente útiles cuando necesitas definir tipos complejos o realizar operaciones avanzadas en tipos existentes.

`Pick<T, K>`:

La utilidad Pick<T, K> se utiliza para crear un nuevo tipo seleccionando solo un subconjunto de propiedades de un tipo existente T, especificadas por las claves K.

interface Usuario {
    id: number;
    nombre: string;
    email: string;
    edad: number;
}

type PerfilBasico = Pick<Usuario, 'nombre' | 'email'>;

const perfil: PerfilBasico = {
    nombre: 'Juan',
    email: 'juan@example.com'
};

`Omit<T, K>`:

La utilidad Omit<T, K> es similar a Pick, pero crea un nuevo tipo excluyendo un subconjunto de propiedades de un tipo existente T, especificadas por las claves K.

interface Producto {
    id: number;
    nombre: string;
    precio: number;
    categoria: string;
}

type ProductoSinPrecio = Omit<Producto, 'precio'>;

const producto: ProductoSinPrecio = {
    id: 1,
    nombre: 'Camiseta',
    categoria: 'Ropa'
};

`Extract<T, U>`:

La utilidad Extract<T, U> se utiliza para crear un tipo que consiste en aquellos elementos de T que son asignables a U. Es útil cuando necesitas filtrar un tipo basado en otro tipo.

type Animal = 'Perro' | 'Gato' | 'Pájaro' | 'Conejo';
type Mascota = 'Perro' | 'Gato';

type MascotasPosibles = Extract<Animal, Mascota>; // 'Perro' | 'Gato'

4. Utilidades de Inferencia de Tipos:

Las utilidades de inferencia de tipos de TypeScript proporcionan herramientas que permiten inferir tipos de manera automática a partir de expresiones y funciones. Estas utilidades son útiles para mejorar la legibilidad del código y evitar errores comunes relacionados con la asignación incorrecta de tipos.

`ReturnType<T>`:

La utilidad ReturnType<T> se utiliza para obtener el tipo de retorno de una función T. Esto es útil cuando necesitas inferir el tipo de retorno de una función sin tener que especificarlo explícitamente.

function sumar(a: number, b: number): number {
    return a + b;
}

type TipoRetornoSumar = ReturnType<typeof sumar>; // number

`Parameters<T>`:

La utilidad Parameters<T> se utiliza para obtener el tipo de los parámetros de una función T. Esto es útil cuando necesitas inferir los tipos de los parámetros de una función sin tener que especificarlos explícitamente.

function imprimirMensaje(mensaje: string, repeticiones: number): void {
    for (let i = 0; i < repeticiones; i++) {
        console.log(mensaje);
    }
}

type TiposParametrosImprimirMensaje = Parameters<typeof imprimirMensaje>; // [string, number]

`InstanceType<T>`:

La utilidad InstanceType<T> se utiliza para obtener el tipo de instancia de una clase T. Esto es útil cuando necesitas inferir el tipo de instancia de una clase sin tener que especificarlo explícitamente.

class MiClase {
    constructor(public nombre: string) {}
}

type TipoInstanciaMiClase = InstanceType<typeof MiClase>; // MiClase

5. Conclusiones:

En este artículo, hemos explorado algunas de las poderosas utilidades que TypeScript ofrece para mejorar el desarrollo frontend. Desde simplificar la creación de tipos hasta proporcionar herramientas para escribir código más seguro y mantenible, TypeScript ofrece una amplia gama de utilidades que pueden ayudar a los desarrolladores frontend a ser más productivos y a escribir código de mayor calidad.

Al utilizar las utilidades de TypeScript, los desarrolladores pueden:

Simplificar tareas comunes: Las utilidades como Partial<T>, Readonly<T>, y Record<K, T> hacen que sea más fácil trabajar con tipos de datos en TypeScript, permitiendo a los desarrolladores realizar tareas comunes de manera más rápida y eficiente.
Crear tipos más específicos y precisos: Las utilidades de manipulación de tipos como Pick<T, K>, Omit<T, K>, y Extract<T, U> permiten a los desarrolladores definir tipos de datos más específicos y precisos, lo que ayuda a evitar errores y mejorar la legibilidad del código.
Mejorar la legibilidad del código: Las utilidades de inferencia de tipos como ReturnType<T>, Parameters<T>, y InstanceType<T> permiten a los desarrolladores inferir tipos de manera automática a partir de expresiones y funciones, lo que mejora la legibilidad del código y reduce la posibilidad de errores.

En resumen, las utilidades de TypeScript ofrecen una amplia gama de herramientas que pueden ayudar a los desarrolladores frontend a escribir código más robusto, seguro y mantenible. Al aprovechar estas utilidades en tus proyectos frontend, puedes mejorar tu flujo de trabajo de desarrollo y crear aplicaciones de mayor calidad que cumplan con las demandas del mundo real.

6. Recursos:

Documentación Oficial de TypeScript: https://www.typescriptlang.org/docs/handbook/utility-types.html.

w3schools - TypeScript Utility Types: https://www.w3schools.com/typescript/typescript_utility_types.php

typescript utilities guide: https://github.com/typescript-cheatsheets/utilities

Generic Types en TypeScript, desarrollo reutilizable y adaptable

Joan Peramás Ceras — Mon, 04 Mar 2024 16:24:34 +0000

Como desarrolladores frontend, comprendemos la importancia de crear componentes reutilizables y adaptables. Los Generic Types de TypeScript vienen al rescate, permitiéndonos escribir código que funcione perfectamente con varios tipos de datos sin sacrificar la seguridad de tipos.

¿Qué son los Tipos Genéricos?

Imagina una función que pueda manejar tanto cadenas de texto como números. En lugar de definir funciones separadas para cada tipo, los tipos genéricos te permiten crear una única función que trabaja con un tipo de marcador de posición (a menudo representado por letras como T, U o V). Este marcador de posición actúa como una plantilla, permitiendo que la función se adapte a diferentes tipos de datos cuando se usa:

function identidad<T>(valor: T): T {
  return valor;
}

const nombre = identidad<string>("Alice"); // Tipo: cadena de texto
const edad = identidad<number>(30); // Tipo: número

Casos de Uso Comunes en el Desarrollo Frontend:

1. Componentes Reutilizables:

Crea componentes que pueden aceptar y trabajar con diferentes tipos de datos:

interface ElementoLista<T> {
  datos: T;
}

const elementosLista: ElementoLista<string | number>[] = [
  { datos: "Elemento 1" },
  { datos: 2 },
];

function renderizarLista<T>(elementos: ElementoLista<T>[]): string {
  let lista = "";
  for (const elemento of elementos) {
    lista += `<li>${elemento.datos}</li>`;
  }
  return lista;
}

// Ejemplo de uso:
const listaHTML = renderizarLista(elementosLista);
console.log(listaHTML);

2. Interacciones Seguras con APIs:

Garantiza la seguridad de tipos al interactuar con APIs que devuelven diferentes estructuras de datos:

interface RespuestaAPI<T> {
  datos: T;
  estado: number;
}

async function obtenerDatos<T>(url: string): Promise<RespuestaAPI<T>> {
  // ... lógica de obtención
}

const datosUsuario = await obtenerDatos<Usuario>("https://api.ejemplo.com/usuarios/1");
// datosUsuario tiene tipo RespuestaAPI<Usuario>, garantizando la seguridad de tipos

3. Funciones Utilitarias:

Crea funciones que operen en diferentes tipos de datos con una lógica consistente:

function mapearValores<T, U>(valores: T[], mapeador: (valor: T) => U): U[] {
  return valores.map(mapeador);
}

const cadenas = mapearValores(["manzana", "banana"], (cadena) => cadena.toUpperCase()); // cadenas: string[]
const numeros = mapearValores([1, 2, 3], (numero) => numero * 2); // numeros: number[]

Técnicas Avanzadas con Tipos Genéricos

Más allá de los usos fundamentales, los tipos genéricos ofrecen funcionalidades avanzadas para mejorar aún más tu desarrollo frontend:

1. Tipos Condicionales:

Los tipos genéricos se pueden combinar con lógica condicional para crear tipos basados en condiciones de tiempo de ejecución. Esto permite un manejo dinámico de tipos dentro de la definición genérica:

type ArregloCadenasONumeros<T> = T extends string ? string[] : T extends number ? number[] : never;

const arregloCadenas: ArregloCadenasONumeros<string> = ["manzana", "banana"];
const arregloNumeros: ArregloCadenasONumeros<number> = [1, 2, 3];

// Esto daría como resultado un error de tipo:
// const arregloInvalido: ArregloCadenasONumeros<boolean> = [true, false];

2. Tipos Mapeados:

Estos tipos involucran transformar las propiedades de un tipo existente en un tipo nuevo. Esto puede ser útil para crear funciones utilitarias o iterar sobre las propiedades de un objeto con seguridad de tipos:

interface Usuario {
  nombre: string;
  edad: number;
}

type UsuarioMayúsculas<T extends Usuario> = {
  [P in keyof T]: T[P] extends string ? Uppercase<T[P]> : T[P];
};

const usuarioMayúsculas: UsuarioMayúsculas<Usuario> = {
  nombre: "JUAN",
  edad: 30,
};

3. Tipos Utilitarios Genéricos:

TypeScript proporciona tipos utilitarios genéricos incorporados como Partial<T>, Pick<T, K> y Readonly<T>que simplifican las manipulaciones comunes de tipos. Además, puedes crear tipos utilitarios personalizados para necesidades específicas:

type Nullable<T> = T | null; // Permite valores nulos para cualquier tipo

type Omitir<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>; // Excluye propiedades específicas

const datosUsuarioOpcionales: Nullable<Usuario> = { nombre: "Alice" }; // Válido

const infoUsuario: Omitir<Usuario, "edad"> = { nombre: "Bob" }; // Válido (excluye "edad")

Beneficios de Usar Tipos Genéricos:

Mayor Reutilización: Los componentes genéricos se pueden usar con varios tipos de datos, eliminando la necesidad de código repetitivo para cada tipo específico.
Seguridad de Tipos Mejorada: La verificación de tipos se aplica incluso cuando se utilizan tipos genéricos, lo que evita errores en tiempo de ejecución debido a tipos de datos incorrectos.
Estructura de Código Más Clara: Los tipos genéricos promueven un código mantenible al expresar explícitamente los tipos de datos esperados para componentes y funciones.

Conclusión

Los tipos genéricos te permiten crear componentes y funciones adaptables y seguras para tipos en tu desarrollo frontend. Al incorporarlos a tu flujo de trabajo, puedes impulsar la reutilización del código, la mantenibilidad y la calidad general de la aplicación. Aprovecha el poder de los genéricos para abordar diversos tipos de datos con confianza y construir experiencias frontend robustas.

Recursos

Official TypeScript Documentation: https://www.typescriptlang.org/docs/ - La documentación oficial proporciona explicaciones completas, ejemplos y referencias..
Learn TypeScript Generics: https://www.freecodecamp.org/news/how-typescript-generics-work/ - Este tutorial interactivo de FreeCodeCamp lo guía a través de los conceptos básicos con ejemplos prácticos.

Optimizando la Experiencia del Usuario con el Atributo "spellcheck" de HTML

Joan Peramás Ceras — Thu, 29 Feb 2024 17:49:45 +0000

Como desarrolladores front-end, nos esforzamos por crear experiencias de usuario (UX) fluidas e intuitivas que fomenten la interacción y generen confianza. En esta búsqueda, a menudo nos enfocamos en el diseño visual, los patrones de interacción y la optimización del rendimiento. Sin embargo, un aspecto de la experiencia de usuario, a menudo subestimado pero crucial, radica en los detalles: garantizar la claridad y la profesionalidad a través de una ortografía adecuada.

Aquí es donde el humilde atributo HTML spellcheck se convierte en una herramienta valiosa. Esta joya oculta permite a los navegadores ayudar a los usuarios a mantener una ortografía precisa dentro de los elementos interactivos, fomentando una experiencia más segura y libre de frustraciones. En este artículo, nos adentraremos en el mundo de spellcheck, explorando sus funcionalidades, beneficios y las mejores prácticas para mejorar su comprensión y empoderarlo para aprovecharlo de manera efectiva en sus proyectos.

¿Qué es el atributo `spellcheck`?

El atributo spellcheck es un atributo booleano que indica a los navegadores si deben habilitar la revisión ortográfica para el contenido dentro de un elemento HTML. Se aplica principalmente a elementos editables como <input>, <textarea> y elementos con el atributo contenteditable establecido en true.

Valores y Uso:

El atributo spellcheck puede tener dos valores:

true: Habilita la revisión ortográfica para el contenido del elemento.
false: Deshabilita la revisión ortográfica para el contenido del elemento (comportamiento predeterminado si no se establece explícitamente).

Veamos algunos ejemplos de uso:

<input type="text" name="nombre" spellcheck="true" placeholder="Ingrese su nombre">

<input type="password" name="contraseña" spellcheck="false" placeholder="Ingrese su contraseña">

<div contenteditable="true" spellcheck="true">Escriba su contenido aquí...</div>

Beneficios de usar `spellcheck`:

Mejora la experiencia del usuario: Los usuarios pueden concentrarse en expresarse sin preocuparse por errores tipográficos menores, aumentando su confianza y reduciendo la frustración.
Accesibilidad mejorada: Los usuarios que dependen de tecnologías de asistencia (por ejemplo, lectores de pantalla) pueden beneficiarse de la funcionalidad de revisión ortográfica integrada.
Mayor profesionalidad: Una escritura pulida contribuye a una presencia en línea más profesional y confiable.
Menos errores de validación: La revisión ortográfica puede detectar posibles errores durante la entrada, evitando la necesidad de que la validación del lado del cliente o del servidor los marque más adelante.

Consideraciones y Mejores Prácticas:

Compatibilidad del navegador: Aunque es compatible con la mayoría de los navegadores, verifique la compatibilidad en diferentes navegadores, especialmente en versiones anteriores.

Revisión ortográfica contextual: Si bien el atributo spellcheck proporciona una solución básica, considere implementar una revisión ortográfica contextual más avanzada utilizando bibliotecas de JavaScript o lógica personalizada.
Preocupaciones de privacidad: Tenga en cuenta las posibles implicaciones de privacidad si las funciones de revisión ortográfica envían la entrada del usuario a servidores externos.
Opte por soluciones del lado del cliente o configure la revisión ortográfica del lado del servidor para respetar la privacidad del usuario.
Campos de contraseña: Siempre deshabilite la revisión ortográfica para los campos de contraseña para evitar comprometer información confidencial.
Soporte multilingue: Elija bibliotecas o funciones del navegador que admitan varios idiomas para

Habilitar la revisión ortográfica en Chrome

Para activar la revisión ortográfica en Chrome para tu computadora, sigue estos pasos:

1) Abre Chrome y ve a la "Configuración"

Abre una ventana de chrome y escribe lo siguiente:

chrome://settings/languages

2) Habilita la verificación ortográfica spellcheck

Ve a la sección de validación ortográfica, en caso la tengas desactivada puedes habilitarla.

Asegúrate de que el idioma que deseas para la revisión ortográfica esté en la lista y tenga una marca de verificación junto a él. Si no es así, agrégalo haciendo clic en "Agregar idiomas" y seleccionando el idioma.

Chrome te sugerirá correcciones para palabras mal escritas a medida que escribes en campos de texto y áreas editables.
Haz clic en una sugerencia para reemplazar la palabra mal escrita.

Conclusión:

El atributo spellcheck de HTML es una herramienta que a menudo pasa desapercibida, pero tiene el potencial de marcar una gran diferencia en la experiencia de sus usuarios. Al habilitar la revisión ortográfica en elementos clave, puede fomentar la confianza, mejorar la accesibilidad, y contribuir a una presencia en línea más profesional.

Notas adicionales:

La revisión ortográfica está habilitada de forma predeterminada para la mayoría de los idiomas en Chrome.

Recursos:

MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck

CSS @layer: domina el poder de las capas

Joan Peramás Ceras — Fri, 23 Feb 2024 01:15:27 +0000

Olvídate del código CSS caótico y fragmentado. Con la propiedad @layer puedes organizar tu código CSS de manera intuitiva.

¿Qué son las capas CSS?

Imagina las capas CSS como contenedores independientes que encapsulan estilos específicos. Cada capa posee su propio contexto, aislando sus reglas de las demás. Adiós a las batallas con la especificidad con un código CSS organizado y limpio.

¿Cómo usar la propiedad `@layer`?

Crear capas es simple. Define un nombre único para cada capa y establece su orden de aparición. A continuación, agrupa las reglas CSS dentro de cada capa.

Ejemplo práctico:

Imagina un sitio web con tres secciones: encabezado, contenido principal y pie de página. Con las capas CSS, puedes organizar el código de forma intuitiva:

CSS
@layer header {
  /* Estilos específicos para el encabezado */
}

@layer main {
  /* Estilos específicos para el contenido principal */
}

@layer footer {
  /* Estilos específicos para el pie de página */
}

Ejemplos de Temas Intercambiables con Capas CSS:

Formas de crear capas en CSS

Veremos las diferentes formas de crear capas en CSS, desde capas anónimas hasta capas con nombre, anidadas, con orden y reglas condicionales. También como elegir la forma adecuada para cada caso y cómo aprovechar las capas para mejorar tu workflow y la experiencia de usuario.

1. Capas anónimas:

Se crean utilizando la regla @layer. No tienen nombre, por lo que no se puede hacer referencia a ellas posteriormente. Útiles para agrupar reglas CSS relacionadas sin necesidad de nombrarlas.

@layer {
  /* Reglas CSS para la capa anónima */
}

2. Capas con nombre:

Se crean utilizando la regla @layer con un nombre. Se puede hacer referencia a ellas posteriormente para añadir más código CSS o reordenarlas. Útiles para organizar y gestionar capas de forma más precisa.

@layer header {
  /* Reglas CSS para la capa "header" */
}

@layer main {
  /* Reglas CSS para la capa "main" */
}

3. Capas anidadas:

Se pueden crear capas dentro de otras capas. Las capas anidadas heredan el contexto de la capa padre. Útiles para organizar estilos específicos dentro de una sección o componente.

@layer header {
  @layer logo {
    /* Reglas CSS para el logo dentro del encabezado */
  }

  @layer navigation {
    /* Reglas CSS para la navegación dentro del encabezado */
  }
}

4. Capas con orden:

Se puede definir el orden de las capas utilizando la propiedad order. Las capas con un valor de order mayor se superponen a las capas con un valor menor. Útil para controlar la superposición de elementos.

@layer background {
  order: 0;
  /* Reglas CSS para la capa de fondo */
}

@layer content {
  order: 1;
  /* Reglas CSS para la capa de contenido */
}

5. Capas con reglas condicionales:

Se pueden crear capas con reglas condicionales utilizando la propiedad @media. Las capas solo se aplican si se cumplen las condiciones especificadas. Útil para mostrar diferentes estilos en diferentes dispositivos o tamaños de pantalla.

@media (min-width: 768px) {
  @layer sidebar {
    /* Reglas CSS para la capa "sidebar" en pantallas grandes */
  }
}

6. Importaciones en capas:

La regla @import te permite importar reglas CSS desde otro archivo. Esto puede ser útil para organizar tu código en archivos separados o para compartir capas con otros proyectos.

@import url("styles/header.css") layer(navigation);
/* Reglas CSS de la capa layer(navigation) importada de styles/header.css*/

Te permite importar un archivo CSS y encapsularlo en una capa virtual dentro de tu código. Las capas CSS te permiten hacer esto, y no solo eso, sino que también te dan control sobre la especificidad de las reglas dentro de cada capa.

Ejemplo práctico usando CSS, HTML y JS:

El objetivo es crear de este ejemplo es crear un sitio web con tema claro/oscuro usando capas CSS.

Estructura:

index.html: Archivo HTML principal.
styles.css: Archivo CSS principal que define las capas y los estilos.
script.js: Archivo JavaScript que controla el cambio de tema.

index.html:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejemplo de Tema Claro/Oscuro con Capas CSS</title>
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <header>
    <h1>Título del sitio web</h1>
    <select id="theme-selector">
      <option value="light">Tema Claro</option>
      <option value="dark">Tema Oscuro</option>
    </select>
  </header>
  <main>
    <p>Contenido principal del <a href="#">sitio web</a>.</p>
  </main>
  <footer>
    <p>Copyright &copy; 2024</p>
  </footer>
  <script src="./script.js"></script>
</body>
</html>

styles.css:

/* Capa base */
@layer base {
    body {
      font-family: sans-serif;
      font-size: 16px;
      margin: 5rem;
    }

    h1 {
      font-size: 24px;
      font-weight: bold;
    }

    p {
      line-height: 1.5;
    }
}

  /* Tema Claro */
  @layer light {
    .light {
      background-color: #fff;
      color: #333;

      a {
        color: #007bff;
      }
    }

  }

  /* Tema Oscuro */
  @layer dark {
    .dark {
      background-color: #212529;
      color: #fff;

      a {
        color: #c3cd6d;
      }
    }

  }

script.js:

const bodyEl = document.querySelector('body');
const themeSelector = document.getElementById('theme-selector');

function changeTheme(theme) {
  bodyEl.classList.remove('light', 'dark');
  bodyEl.classList.add(theme);
}

themeSelector.addEventListener('change', (e) => {
  changeTheme(e.target.value);
});

// Tema inicial
changeTheme(themeSelector.value);

Explicación:

El archivo index.html define la estructura básica del sitio web con un selector de tema.

El archivo styles.css define dos capas: light y dark con estilos específicos para cada tema.

El archivo script.js controla el cambio de tema al seleccionar una opción en el selector.

En este ejemplo, se utilizan capas CSS para:

Separar los estilos del tema claro y oscuro.
Facilitar el cambio de tema sin necesidad de recargar la página.
Mantener el código organizado y legible.
Este es un ejemplo simple que puede ser adaptado y ampliado para crear sitios web más complejos con diferentes temas y estilos.

Compatibilidad del Navegador:

CSS @layer es una nueva regla que permite organizar estilos en capas virtuales, mejorando la organización y el control de la especificidad. Aunque ofrece un gran potencial, es importante conocer su compatibilidad actual con los navegadores.

Conclusión:

Las capas CSS son una herramienta poderosa que te permite llevar tu código al siguiente nivel. Experimenta una mejor organización, un mantenimiento más sencillo y una flexibilidad sin precedentes.

Beneficios de usar capas CSS para temas intercambiables:

Modularidad: Los temas se encapsulan en capas independientes, facilitando su mantenimiento y actualización.

Flexibilidad: Puedes crear una gran variedad de temas con diferentes estilos y características.

Personalización: Permite a los usuarios adaptar la apariencia del sitio web a sus preferencias.

Rendimiento: Reduce la carga de CSS al cargar solo el tema seleccionado.

Considerar navegadores antiguos: Si tu proyecto necesita compatibilidad con navegadores antiguos, es recomendable evitar el uso de @layer.

Comprobar la compatibilidad: Antes de usar @layer en producción, es importante verificar la compatibilidad con los navegadores que tu público objetivo utiliza.

Recursos adicionales:

CSS Cascade Layers: ¡Sistema de capas en CSS!: Sistema de capas en CSS
MSN Web Docs: @layer css layer
Lenguajecss.com: CSS Cascade Layers: CSS Cascade Layers
caniuse.com: @layer caniuse layer
New in Chrome 99: CSS Cascade Layers, Show Picker, and more! New in Chrome 99: CSS Cascade Layers, Show Picker, and more!

IndexedDB: Una guía para desarrolladores web frontend

Joan Peramás Ceras — Wed, 21 Feb 2024 16:21:55 +0000

Antes de sumergirnos en operaciones con IndexedDB, es crucial entender la importancia de estas funcionalidades en el desarrollo web frontend. IndexedDB no solo ofrece un método eficiente para almacenar y recuperar datos en el navegador, sino que también proporciona características avanzadas que permiten a los desarrolladores construir aplicaciones web más potentes y versátiles.

¿Qué es IndexedDB?

IndexedDB es una API de JavaScript que proporciona una forma de almacenar grandes cantidades de datos de manera estructurada en el navegador del usuario. A diferencia de las cookies y el almacenamiento local, que tienen limitaciones significativas en términos de capacidad y estructura, IndexedDB está diseñado para manejar conjuntos de datos más grandes y complejos.

Compatibilidad del Navegador:

IndexedDB ha experimentado un crecimiento significativo en términos de compatibilidad con los navegadores modernos. A medida que la tecnología web ha evolucionado, la mayoría de los navegadores principales ahora admiten IndexedDB, brindando a los desarrolladores una plataforma consistente para almacenar datos en el lado del cliente. Aquí hay una visión general de la compatibilidad de IndexedDB con algunos de los navegadores más utilizados:

IndexedDB es casi compatible con todos los navegadores modernos. Sin embargo, si estás trabajando con navegadores más antiguos tienes esta forma sencilla de verificarlo en el objeto window:

  if (!('indexedDB' in window)) {
    // No puede usar IndexedDB
    console.log("Este navegador no soporta IndexedDB");
    return;
  } else {
    // Puede usar IndexedDB:
    // ...
  }

Ventajas de usar IndexedDB

IndexedDB ofrece varias ventajas significativas para los desarrolladores web que necesitan almacenar datos en el navegador del usuario. Estas ventajas contribuyen a una experiencia de usuario más eficiente y robusta. A continuación, se detallan algunas de las principales ventajas:

1. Capacidad para grandes cantidades de datos:

IndexedDB es capaz de manejar conjuntos de datos significativamente grandes en comparación con otras opciones de almacenamiento del lado del cliente, lo que lo convierte en una elección ideal para aplicaciones que manejan datos extensos.

2. Soporte para transacciones:

IndexedDB tiene la capacidad para trabajar con transacciones, permitiendo operaciones atómicas y garantizando la coherencia de los datos. Esto es esencial en situaciones donde las operaciones deben ser ejecutadas en conjunto o ninguna de ellas.

3. Trabajo eficiente fuera de línea:

IndexedDB facilita el trabajo sin conexión, permitiendo que las aplicaciones accedan y manipulen datos incluso cuando el usuario no está conectado a Internet. Esto es especialmente útil para aplicaciones que requieren funcionalidad offline, como lectores de noticias o aplicaciones de gestión de tareas.

4. Estructura de datos flexible:

La flexibilidad de la estructura de datos en IndexedDB, donde puedes almacenar objetos complejos y anidados. Esto facilita la representación de datos complejos y su manipulación en el lado del cliente.

5. Seguridad y privacidad:

IndexedDB, al ser parte del navegador, ofrece un nivel de seguridad y privacidad al evitar que otros dominios accedan directamente a los datos almacenados. Además, los datos almacenados no son enviados al servidor a menos que sea necesario.

Uso básico de IndexedDB:

Exploremos los conceptos fundamentales de cómo trabajar con IndexedDB, desde la creación de una base de datos hasta la manipulación de datos dentro de ella.

Antes de actualizar datos en IndexedDB, es esencial comprender cómo abrir una conexión a la base de datos, iniciar una transacción y trabajar con objetos de almacenamiento. Aquí hay una breve descripción:

1. Apertura y creación de una base de datos:

Puedes crear varias bases de datos. Si la base de datos no existe, se creará automáticamente:

// Abriendo o creando una base de datos llamada "MiBaseDeDatos" con la versión 1.
const request = indexedDB.open("MiBaseDeDatos", 1);

2. Manejo de eventos y devoluciones de llamada (callbacks):

IndexedDB utiliza eventos para notificar sobre cambios en la base de datos, como aperturas exitosas, actualizaciones de datos, errores, etc. Además, se utilizan devoluciones de llamada para manejar estas situaciones y ejecutar código específico en respuesta a eventos.

En cuanto a los eventos onsuccess y onerror, se utilizan para manejar el resultado de la apertura de la conexión a la base de datos. Aquí tienes un ejemplo que incluye el manejo de estos eventos:

let db;

// Abrir una conexión a la base de datos
const request = indexedDB.open('miBaseDeDatos', 1);

// Manejar éxito al abrir la conexión
request.onsuccess = function (event) {
  db = event.target.result;
  console.log('Conexión exitosa a la base de datos.');

  // Lógica después de abrir la conexión con éxito

  // Por ejemplo, realizar operaciones con la base de datos
};

// Manejar errores al abrir la conexión
request.onerror = function (event) {
  console.error('Error al abrir la conexión:', event.target.error);
};

// Manejar actualización de la versión de la base de datos
request.onupgradeneeded = function (event) {
  const db = event.target.result;

  // Crear o modificar almacenes de objetos en función de la versión
};

// Manejar cambio de versión por otra instancia
db.onversionchange = function (event) {
  db.close();
  console.log('Se ha producido un cambio en la versión de la base de datos. Por favor, recargue la página.');
};

El evento updateneeded se dispara cuando se abre una conexión a la base de datos y se detecta que la versión proporcionada es mayor que la versión actual de la base de datos o si la base de datos no existe. Es el lugar adecuado para realizar tareas de actualización de la estructura de la base de datos, como crear o modificar objetos de almacenamiento.

El evento onversionchange se dispara cuando otra instancia del mismo navegador cambia la versión de la base de datos. Es el lugar adecuado para cerrar la conexión actual, ya que la base de datos ha cambiado y se requiere una nueva conexión para reflejar esos cambios.

3. Creación y Eliminación de Almacenes de Objetos:

Una base de datos IndexedDB puede contener uno o más almacenes de objetos. Cada almacén de objetos puede contener múltiples registros, y cada registro es un objeto que puede tener propiedades y valores asociados.

// Manejar actualización de la versión de la base de datos
request.onupgradeneeded = function (event) {
  const db = event.target.result;

  // Obtener la transacción y crear o modificar almacenes de objetos
  const transaction = event.target.transaction;

  // Crear un nuevo almacén de objetos
  if (!db.objectStoreNames.contains('productos')) {
    const newStore = db.createObjectStore('productos', { keyPath: 'id' });
    newStore.createIndex('porNombre', 'nombre', { unique: false });
  }

  // Eliminar un almacén de objetos existente
  if (db.objectStoreNames.contains('productosAntiguo')) {
    db.deleteObjectStore('productosAntiguo');
  }
};

Dentro de onupgradeneeded, se obtiene la transacción (event.target.transaction) y se utiliza para crear (createObjectStore) o eliminar (deleteObjectStore) almacenes de objetos.

Para crear un nuevo almacén de objetos (productos), se utiliza **createObjectStore **y también se crea un índice llamado porNombre basado en la propiedad nombre.

Para eliminar un almacén de objetos existente (productosAntiguo), se utiliza deleteObjectStore.

4. Agregar y Recuperar Datos:

La capacidad de agregar datos a un almacén de objetos es esencial para cualquier aplicación web. Al hacerlo, podemos almacenar información relevante, como configuraciones de usuario, preferencias o cualquier otro dato necesario para el funcionamiento de la aplicación. La clave para lograr esto reside en el uso de transacciones y solicitudes de almacenamiento en indexedDB. Al abrir una transacción y realizar una solicitud de almacenamiento, podemos insertar nuevos registros o actualizar los existentes en el almacén de objetos.

let db;

// Abrir una conexión a la base de datos
const request = indexedDB.open('miBaseDeDatos', 3);

// Manejar éxito al abrir la conexión
request.onsuccess = function (event) {
  db = event.target.result;
  console.log('Conexión exitosa a la base de datos.');

  // Añadir datos al almacén de objetos
  agregarDatos();

  // Recuperar datos del almacén de objetos
  recuperarDatos();
};

// Manejar errores al abrir la conexión
request.onerror = function (event) {
  console.error('Error al abrir la conexión:', event.target.error);
};

// Manejar actualización de la versión de la base de datos
request.onupgradeneeded = function (event) {
  const db = event.target.result;

  // Obtener la transacción y crear o modificar almacenes de objetos
  const transaction = event.target.transaction;

  // Crear un nuevo almacén de objetos
  if (!db.objectStoreNames.contains('productos')) {
    const newStore = db.createObjectStore('productos', { keyPath: 'id' });
    newStore.createIndex('porNombre', 'nombre', { unique: false });
  }
};

// Manejar cambio de versión por otra instancia
db.onversionchange = function (event) {
  db.close();
  console.log('Se ha producido un cambio en la versión de la base de datos. Por favor, recargue la página.');
};

// Función para añadir datos al almacén de objetos
function agregarDatos() {
  const transaction = db.transaction(['productos'], 'readwrite');
  const store = transaction.objectStore('productos');

  // Añadir un nuevo objeto
  const requestAdd = store.add({ id: 1, nombre: 'Ejemplo 1', cantidad: 30 });

  requestAdd.onsuccess = function (event) {
    console.log('Datos añadidos con éxito.');
  };

  requestAdd.onerror = function (event) {
    console.error('Error al añadir datos:', event.target.error);
  };
}

// Función para recuperar datos del almacén de objetos
function recuperarDatos() {
  const transaction = db.transaction(['productos'], 'readonly');
  const store = transaction.objectStore('productos');

  // Recuperar objeto por clave primaria (id)
  const requestGet = store.get(1);

  requestGet.onsuccess = function (event) {
    const result = event.target.result;
    if (result) {
      console.log('Datos recuperados:', result);
    } else {
      console.log('No se encontraron datos con la clave primaria proporcionada.');
    }
  };

  requestGet.onerror = function (event) {
    console.error('Error al recuperar datos:', event.target.error);
  };
}

La recuperación de datos es igualmente crucial, ya que permite a la aplicación web acceder y mostrar la información almacenada de manera eficiente. En indexedDB, esto se logra mediante la apertura de una transacción de solo lectura y la realización de solicitudes de recuperación de datos. Podemos realizar búsquedas específicas utilizando índices o simplemente recuperar todos los registros presentes en el almacén de objetos.

La función agregarDatos realiza una transacción de escritura ('readwrite') para añadir un nuevo objeto al almacén de objetos productos usando el método add.

La función recuperarDatos realiza una transacción de solo lectura ('readonly') para recuperar un objeto del almacén de objetos productos usando el método get.

Adapta el código según tus necesidades específicas y la estructura de tu base de datos. Ten en cuenta que estas operaciones deben realizarse dentro de transacciones y se manejan mediante eventos onsuccess y onerror.

5. Actualizar y Eliminar datos:

La actualización y eliminación de datos en IndexedDB implica modificar registros existentes en la base de datos. Este proceso generalmente se realiza mediante transacciones.

let db;

// Abrir una conexión a la base de datos
const request = indexedDB.open('miBaseDeDatos', 4);

// Manejar éxito al abrir la conexión
request.onsuccess = function (event) {
  db = event.target.result;
  console.log('Conexión exitosa a la base de datos.');

  // Actualizar datos en el almacén de objetos
  actualizarDatos();

  // Eliminar datos en el almacén de objetos
  eliminarDatos();
};

// Manejar errores al abrir la conexión
request.onerror = function (event) {
  console.error('Error al abrir la conexión:', event.target.error);
};

// Manejar actualización de la versión de la base de datos
request.onupgradeneeded = function (event) {
  const db = event.target.result;

  // Obtener la transacción y crear o modificar almacenes de objetos
  const transaction = event.target.transaction;

  // Crear un nuevo almacén de objetos
  if (!db.objectStoreNames.contains('productos')) {
    const newStore = db.createObjectStore('productos', { keyPath: 'id' });
    newStore.createIndex('porNombre', 'nombre', { unique: false });
  }
};

// Manejar cambio de versión por otra instancia
db.onversionchange = function (event) {
  db.close();
  console.log('Se ha producido un cambio en la versión de la base de datos. Por favor, recargue la página.');
};

// Función para actualizar datos en el almacén de objetos
function actualizarDatos() {
  const transaction = db.transaction(['productos'], 'readwrite');
  const store = transaction.objectStore('productos');

  // Actualizar un objeto existente
  const requestUpdate = store.put({ id: 1, nombre: 'Ejemplo 1 (actualizado)', cantidad: 35 });

  requestUpdate.onsuccess = function (event) {
    console.log('Datos actualizados con éxito.');
  };

  requestUpdate.onerror = function (event) {
    console.error('Error al actualizar datos:', event.target.error);
  };
}

// Función para eliminar datos en el almacén de objetos
function eliminarDatos() {
  const transaction = db.transaction(['productos'], 'readwrite');
  const store = transaction.objectStore('productos');

  // Eliminar un objeto por clave primaria (id)
  const requestDelete = store.delete(1);

  requestDelete.onsuccess = function (event) {
    console.log('Datos eliminados con éxito.');
  };

  requestDelete.onerror = function (event) {
    console.error('Error al eliminar datos:', event.target.error);
  };
}

La función actualizarDatos realiza una transacción de escritura ('readwrite') para actualizar un objeto existente en el almacén de objetos productos utilizando el método put.

La función eliminarDatos realiza una transacción de escritura ('readwrite') para eliminar un objeto del almacén de objetos productos utilizando el método delete.

Ambas operaciones se manejan mediante eventos onsuccess ** y **onerror. Ajusta el código según tus necesidades y la estructura de tu base de datos.

En conjunto, la capacidad de añadir, actualizar, recuperar y eliminar datos en indexedDB proporciona una base sólida para el desarrollo de aplicaciones web interactivas y eficientes, asegurándonos de aprovechar al máximo las funcionalidades que indexedDB ofrece para el manejo avanzado de datos en el navegador.

Estos son ejemplos básicos y pueden variar según los requisitos específicos de tu aplicación. Recuerda manejar adecuadamente las transacciones, cerrar conexiones cuando no se necesiten y gestionar errores para un código robusto y confiable.

6. Indices y Punteros (Cursores):

Los índices en IndexedDB son estructuras adicionales que permiten la búsqueda eficiente de datos en campos específicos de los objetos almacenados en un almacén de objetos. Estos índices mejoran el rendimiento de las consultas que se basan en criterios de búsqueda, ya que permiten acceder a los datos de manera más rápida.

Al crear un índice, puedes especificar qué propiedad o campo del objeto almacenado debe indexarse. Esto se realiza generalmente dentro del evento onupgradeneeded al abrir la conexión a la base de datos.

const request = indexedDB.open('miBaseDeDatos', 5);

request.onupgradeneeded = function (event) {
  const db = event.target.result;

  if (!db.objectStoreNames.contains('productos')) {
    const objectStore = db.createObjectStore('productos', { keyPath: 'id' });

    // Crear un índice por el campo 'nombre'
    objectStore.createIndex('porNombre', 'nombre', { unique: false });
  }
};

Se crea un índice llamado 'porNombre' en el almacén de objetos productos basado en el campo nombre.

En el contexto de IndexedDB, no hay un concepto directo llamado "punteros". Sin embargo, el API de IndexedDB utiliza referencias de cursor para iterar sobre conjuntos de datos. Los cursores actúan como "punteros" que apuntan a ubicaciones específicas en un almacén de objetos o índice.

const transaction = db.transaction(['productos'], 'readonly');
const objectStore = transaction.objectStore('productos');
const index = objectStore.index('porNombre');

const cursorRequest = index.openCursor();

cursorRequest.onsuccess = function (event) {
  const cursor = event.target.result;

  if (cursor) {
    // Acceder a los datos utilizando el cursor
    console.log('ID:', cursor.primaryKey, 'Nombre:', cursor.value.nombre);

    // Mover al siguiente registro
    cursor.continue();
  } else {
    console.log('Fin del cursor.');
  }
};

cursorRequest.onerror = function (event) {
  console.error('Error al abrir el cursor:', event.target.error);
};

Se utiliza un cursor para recorrer los datos del índice 'porNombre' del almacén de objetos productos. Cada llamada a cursor.continue() mueve el cursor al siguiente registro.

Recuerda que el uso de índices y cursores depende de los requisitos específicos de tu aplicación y de cómo desees acceder y manipular los datos almacenados en IndexedDB.

6. Ejemplo práctico de Indices y Cursores:

Vamos a ver un ejemplo práctico de cómo usar índices en IndexedDB. Supongamos que tienes una base de datos que almacena información sobre libros, y quieres buscar libros por su autor. Vamos a crear un índice para el campo del autor y realizar búsquedas eficientes.

const request = indexedDB.open('biblioteca', 1);

request.onupgradeneeded = function (event) {
  const db = event.target.result;

  // Crear almacén de objetos
  const bookStore = db.createObjectStore('libros', { keyPath: 'id' });

  // Crear un índice por el campo 'autor'
  bookStore.createIndex('porAutor', 'autor', { unique: false });

  // Agregar algunos libros de ejemplo
  bookStore.add({ id: 1, titulo: 'Don Quijote', autor: 'Miguel de Cervantes' });
  bookStore.add({ id: 2, titulo: 'Cien años de soledad', autor: 'Gabriel García Márquez' });
  bookStore.add({ id: 3, titulo: '1984', autor: 'George Orwell' });
};

request.onsuccess = function (event) {
  const db = event.target.result;

  // Realizar una búsqueda utilizando el índice
  const transaction = db.transaction(['libros'], 'readonly');
  const bookStore = transaction.objectStore('libros');
  const index = bookStore.index('porAutor');

  // Buscar libros por autor
  const query = index.openCursor(IDBKeyRange.only('Miguel de Cervantes'));

  query.onsuccess = function (event) {
    const cursor = event.target.result;

    if (cursor) {
      // Acceder a los datos utilizando el cursor
      console.log('ID:', cursor.primaryKey, 'Título:', cursor.value.titulo, 'Autor:', cursor.value.autor);

      // Mover al siguiente registro
      cursor.continue();
    } else {
      console.log('Fin de la búsqueda.');
    }
  };

  query.onerror = function (event) {
    console.error('Error al realizar la búsqueda:', event.target.error);
  };
};

Se crea un almacén de objetos llamado 'libros'.
Se crea un índice llamado 'porAutor' basado en el campo 'autor'.
Se agregan algunos libros de ejemplo al almacén de objetos.
Se realiza una búsqueda utilizando el índice 'porAutor' para encontrar todos los libros escritos por 'Miguel de Cervantes'.
El índice 'porAutor' permite realizar búsquedas eficientes basadas en el campo 'autor' sin tener que recorrer todos los registros del almacén de objetos.

Este es un ejemplo simple, pero en aplicaciones más complejas, los índices son esenciales para optimizar la recuperación de datos.

En conclusión

IndexedDB es una API poderosa en el lado del cliente para el almacenamiento de datos en navegadores web. Aquí hay algunas conclusiones clave:

Almacenamiento de Datos:

IndexedDB proporciona una forma robusta de almacenar datos estructurados en el navegador, lo que permite a las aplicaciones web trabajar con grandes conjuntos de datos de manera eficiente.

Manejo de Versiones:

La gestión de versiones en IndexedDB se realiza a través de eventos como onupgradeneeded. Esto permite realizar cambios en la estructura de la base de datos de manera controlada y garantiza la compatibilidad hacia adelante.

Uso de Índices:

La creación de índices en campos específicos facilita la búsqueda y recuperación eficiente de datos. Esto es crucial para optimizar consultas y mejorar el rendimiento en aplicaciones que manejan grandes cantidades de información.

Transacciones:

El trabajo con transacciones en IndexedDB es fundamental para garantizar la coherencia y consistencia de los datos. Las transacciones pueden ser de solo lectura (readonly) o de escritura (readwrite), dependiendo de la operación que estés realizando.

Manejo de Eventos y Devoluciones de Llamada:

El manejo de eventos y devoluciones de llamada, como onsuccess y onerror, es esencial para manejar situaciones como aperturas exitosas, errores y cambios en la versión de la base de datos.

Operaciones Básicas:

IndexedDB permite realizar operaciones básicas como añadir, recuperar, actualizar y eliminar datos en el almacén de objetos. Estas operaciones se realizan dentro de transacciones.

Punteros y Cursores:

Los cursores actúan como "punteros" para recorrer conjuntos de datos en almacenes de objetos e índices.

Cierre y Bloqueo:

El evento onversionchange se utiliza para manejar situaciones en las que otra instancia de la base de datos ha cambiado la versión, y se cierra la conexión actual para permitir la actualización.

En general, IndexedDB es una herramienta valiosa para desarrolladores web que necesitan almacenar y gestionar datos en el lado del cliente de manera eficiente y escalable. Su capacidad para trabajar con grandes conjuntos de datos y proporcionar una interfaz versátil para la manipulación de datos hace que sea una opción sólida para aplicaciones web modernas.

Forem: Joan Peramás Ceras

Neumorphism: What It Is and CSS Examples

What is Neumorphism?

Key Characteristics of Neumorphism

Advantages of Neumorphism

Challenges of Neumorphism

CSS Examples of Neumorphism

Neumorphic Button

Neumorphic Card

Neumorphic Input Field

Neumorphic Toggle Switch

App to Create Websites Embracing Neumorphism in Design

Conclusion

Exploring JavaScript's Modern Primitives: BigInt and Symbol

Understanding BigInt

Creating BigInt Values

BigInt Operations

Considerations for BigInt

Understanding Symbol

Creating Symbols

Using Symbols in Objects

Well-Known Symbols

Global Symbol Registry

Conclusion

Optimistic UI: Mejora la experiencia de usuario en tus aplicaciones frontend

¿Qué es Optimistic UI?

Ventajas de Optimistic UI

Implementación de Optimistic UI

Paso 1: Actualización optimista de la UI

Paso 2: Manejo de errores

Paso 3: Sincronización con el servidor

Casos de uso para Optimistic UI

Conclusión

Maximizando la Eficiencia con TypeScript Utilities

1. ¿Qué son las utilidades de TypeScript?

2. Utilidades Básicas:

Partial<T>:

Readonly<T>:

Record<K, T>:

3. Utilidades de Manipulación de Tipos:

Pick<T, K>:

Omit<T, K>:

Extract<T, U>:

4. Utilidades de Inferencia de Tipos:

ReturnType<T>:

Parameters<T>:

InstanceType<T>:

5. Conclusiones:

6. Recursos:

Generic Types en TypeScript, desarrollo reutilizable y adaptable

¿Qué son los Tipos Genéricos?

Casos de Uso Comunes en el Desarrollo Frontend:

1. Componentes Reutilizables:

2. Interacciones Seguras con APIs:

3. Funciones Utilitarias:

Técnicas Avanzadas con Tipos Genéricos

1. Tipos Condicionales:

2. Tipos Mapeados:

3. Tipos Utilitarios Genéricos:

Beneficios de Usar Tipos Genéricos:

Conclusión

Recursos

Optimizando la Experiencia del Usuario con el Atributo "spellcheck" de HTML

¿Qué es el atributo spellcheck?

Valores y Uso:

Beneficios de usar spellcheck:

Consideraciones y Mejores Prácticas:

Habilitar la revisión ortográfica en Chrome

Conclusión:

Notas adicionales:

Recursos:

CSS @layer: domina el poder de las capas

¿Qué son las capas CSS?

¿Cómo usar la propiedad @layer?

Formas de crear capas en CSS

1. Capas anónimas:

2. Capas con nombre:

3. Capas anidadas:

4. Capas con orden:

5. Capas con reglas condicionales:

`Partial<T>`:

`Readonly<T>`:

`Record<K, T>`:

`Pick<T, K>`:

`Omit<T, K>`:

`Extract<T, U>`:

`ReturnType<T>`:

`Parameters<T>`:

`InstanceType<T>`:

¿Qué es el atributo `spellcheck`?

Beneficios de usar `spellcheck`:

¿Cómo usar la propiedad `@layer`?