DEV Community: Vanessa

Principios de la WCAG

Vanessa — Wed, 20 Dec 2023 14:23:44 +0000

La accesibilidad web es un tema por el que tengo especial interés. A mi juicio, toda persona debe tener acceso a los recursos web que tanto nos ayudan a crecer personal y profesionalmente (así como también nos entretienen 😉).

Sin embargo, conviene subrayar qué es la accesibilidad y qué c#%”8!😤 significa esto de la WCAG, antes de comenzar con sus principios.

La accesibilidad web no es más que un concepto de desarrollo que busca asegurar una buena experiencia de usuario para las personas con capacidades reducidas.

Ok... todo bien hasta ahí pero ¿qué es WCAG?!!... 😬

WCAG (Web Content Accessibility Guidelines, en español Pautas de Accesibilidad para el Contenido Web), son recomendaciones creadas por la W3C (World Wide Web Consortium) con el objetivo de crear un estándar para que el contenido web sea más accesible.

Cito de su página:

Los documentos WCAG explican cómo hacer el contenido web más accesible para las personas con discapacidad. Por “contenido” web se hace referencia, generalmente, a la información que se puede encontrar en una página o aplicación web, lo cual incluye: Información natural como textos, imágenes y sonidos; Código o marcado que define la estructura, la presentación, etc.

Dentro de las WCAG tenemos 12 criterios, que a su vez se divide cada uno en 3 niveles que determinan el nivel de inversión que se hará en accesibilidad. Nivel A (básico), Nivel AA (Intermedio) y Nivel AAA (Más alto). Esto último lo dejaré para otro artículo.

Ahora se viene lo bueno… 🤓

Principios de WCAG

Las WCAG no son perfectas, pero es muy importante tener presente sus 4 principios para que nuestras páginas web sean más accesibles. Trate de ser lo más llana posible en la descripción de los mismos:

Perceptible: Todo lo que presentes en la web debe ser percibido por tus usuarios (que les llegue al cerebro y lo interpreten).
- Por ejemplo, quieres mostrar una información a tus usuarios pero solo tienes una manera de mostrar esa información, dígase visualmente por la interfaz gráfica pero tus usuarios no tienen acceso a la pantalla o no tiene la visión, como resultado esos usuarios no podrán recibir esa información. Entonces lo ideal sería apoyarse también de un formato más accesible como lo es el texto. El texto suele ser uno de los elementos más perceptibles ya que puede ser leído por el usuario o por un lector de pantalla, traducido, ampliado, etc.
Operable: Tu web no debe depender de un ratón o de un teclado para que cualquier usuario que por cualquier motivo no disponga de estos dispositivos pueda tener alternativas para operar tu sitio.
- Cuando desarrollamos una web operable, le quitamos la dependencia del ratón y teclado para recibir a todos esos usuarios que navegan por la web de una manera diferente.
Comprensible: Cualquier persona que use tu página debe poder entenderla, debe comprender qué les estás diciendo. ¿Qué hace tu sitio?, ¿Cómo operarlo?, ¿Qué información requiere tu sitio de tus usuarios?, ¿Cómo suministrar esa información?
- Por ejemplo al llenar un formulario o si están realizando otro paso, que sepan si cometieron un error y que sepan cómo corregirlo.
Robusto: Debe ser operable sin importar en contexto desde donde es utilizado.
- Por ejemplo: Si, algunos usuarios usarán el Internet Explorer, crea tu sitio para que sea compatible tanto con los últimos navegadores como con los más viejitos. Igualmente piensa en el hardware, no todos tus usuarios tendrán dispositivos modernos. Otro punto importante es que pienses en la conectividad, la banda ancha no llega a todos lados y hay lugares donde la conectividad es muy precaria.

Si tenemos en cuenta estos cuatro principios al momento de desarrollar estaríamos aplicando la lógica para saber si nuestros sitios web son realmente accesibles.

Fuente: Introducción a las Pautas de Accesibilidad para el Contenido Web (WCAG)

🚀Clean Code y buenas prácticas con JavaScript - Cómo nombrar variables, funciones y clases de forma autodescriptiva

Vanessa — Mon, 04 Dec 2023 21:00:24 +0000

Nombrar correctamente nuestras variables, funciones y clases es esencial para escribir un código limpio y comprensible. Aunque las reglas de nomenclatura nos dicen que evitemos detalles técnicos, es crucial que nuestros nombres reflejen la naturaleza y el propósito de cada elemento. Aquí hay algunas pautas para nombrar según el tipo de dato:

Arrays: Lista de Elementos

Cuando trabajamos con arrays, es fundamental usar nombres de variables en plural para denotar su naturaleza de colección. Veamos la evolución de un nombre:

// No recomendado
const user = ["Alex", "Mariana", "Jessica"];

// Regular
const userList = ["Alex", "Mariana", "Jessica"];

// Bueno
const users = ["Alex", "Mariana", "Jessica"];

// Excelente
const userNames = ["Alex", "Mariana", "Jessica"];

Booleans: Valores True o False

Para variables booleanas, es útil agregar prefijos que indiquen su naturaleza. Utilizamos "is," "has," o "can" para hacer que el nombre sea más descriptivo:

// No recomendado
const valid = true;
const read = false;
const color = true;

// Recomendado
const isValid = true;
const canRead = false;
const hasColor = true;

Números: Variables que Contienen Valores Numéricos

Cuando trabajamos con números, prefijos como "max," "min," y "total" ayudan a entender el propósito de la variable:

// No recomendado
const users = 15;

// Recomendado
const maxUsers = 50;
const minUsers = 10;
const totalUsers = 15;

Funciones: Acciones en el Código

Las funciones representan acciones y deben ser concisas y descriptivas. Se sugiere que inicien con un verbo seguido de un sustantivo:

// No recomendado
createUserIfNotExist();
updateUserIfNotEmpty();
sendEmailIfIsValid();

// Recomendado
createUser();
updateUser();
sendEmail();

Funciones de Acceso, Modificación o Predicado

Cuando se trata de funciones de acceso, modificación o predicado, añadir prefijos como "get," "set," o "is" mejora la legibilidad:

// Ejemplo
getUser();
setUser();
isValidUser();

Clases: Responsabilidad Única y Sustantivos Descriptivos

En el caso de clases, es crucial seguir el principio de responsabilidad única y utilizar sustantivos descriptivos en lugar de nombres genéricos:

// No recomendado
class Data {}
class Manager {}
class Info {}

// Recomendado
class User {}
class UserProfile {}
class Account {}

Siguiendo estas prácticas de nomenclatura, tu código se volverá más autodescriptivo, facilitando su mantenimiento y comprensión tanto para ti como para otros desarrolladores que puedan trabajar con él.

🚀Clean Code y Buenas Prácticas con JavaScript - Reglas del diseño simple

Vanessa — Sun, 03 Dec 2023 19:19:28 +0000

Cuando hablamos de programación, no solo se trata de que funcione; también se trata de hacerlo de la manera más clara, eficiente y sostenible posible. Es por eso que adoptar principios de Clean Code y seguir buenas prácticas en JavaScript se vuelve esencial. Aquí te presentamos cuatro reglas del diseño simple que te ayudarán a elevar la calidad de tu código:

1. ✅ Código que pasa los test:

Una señal segura de un código bien diseñado es su capacidad para superar pruebas de manera consistente. Establecer test robustos no solo verifica la corrección de tu código, sino que también contribuye a la seguridad operativa. Un conjunto completo de buenos test proporciona una red de seguridad, asegurando que tu código funcione como se espera y reduciendo el riesgo de errores.

2. 🧠 Revela la intención del diseño:

El código debe ser como un libro abierto, revelando claramente la intención detrás de cada línea. Cuando alguien revisa tu código, no debería tener que adivinar qué estás tratando de lograr. Opta por nombres descriptivos para variables, funciones y métodos. Un código autoexplicativo no solo facilita la lectura y el mantenimiento, sino que también mejora la colaboración en equipos.

3. 🚫 Respeta el principio DRY: “don't repeat yourself”:

La repetición de código es un enemigo silencioso. Cada duplicación incrementa la posibilidad de errores y dificulta el mantenimiento. Siguiendo el principio DRY, evita repetir fragmentos de código. Abstrae funciones y utiliza la modularidad para compartir lógica común. Al hacerlo, no solo mejoras la coherencia, sino que también facilitas futuras modificaciones y actualizaciones.

4. 🧩 Menor número posible de elementos:

La simplicidad es clave. Divide tu código en funciones, cada una realizando una acción específica. Siguiendo el principio "una función = una acción", tu código se vuelve más comprensible y mantenible. Evita funciones abarrotadas que realizan múltiples tareas y busca la elegancia en la simplicidad. Cuantos menos elementos tenga tu código, más fácil será de entender y mantener.

Al adoptar estas reglas del diseño simple, no solo mejorarás la calidad de tu código, sino que también sentarás las bases para un desarrollo más eficiente y colaborativo. ¡A codificar de manera limpia y eficaz en JavaScript! 💻✨

Simplificar el flujo de trabajo con la magia de los Mixins

Vanessa — Sat, 14 Oct 2023 18:18:38 +0000

En el apasionante mundo del desarrollo de aplicaciones Vue, los mixins destacan como una herramienta poderosa y versátil para simplificar y mejorar el flujo de trabajo del desarrollador. Estos pequeños pero poderosos fragmentos de código son un recurso esencial para la reutilización inteligente de funcionalidades comunes en múltiples componentes.

Los mixins en Vue permiten a los desarrolladores encapsular lógica y comportamientos específicos en un conjunto reutilizable de opciones de componente. Al hacerlo, los desarrolladores pueden evitar la duplicación de código, mejorar la modularidad y la legibilidad del código, y acelerar significativamente el proceso de desarrollo.

En esta guía exhaustiva, exploraremos en detalle el concepto de mixins y su papel fundamental en la simplificación del desarrollo de aplicaciones Vue. Descubriremos cómo estos fragmentos de código mágicos pueden transformar la forma en que construimos y mantenemos nuestras aplicaciones, ofreciendo un enfoque más eficiente y elegante para la gestión de la lógica del componente.

Consejos para la organización efectiva de Mixins en tu proyecto Vue

Los mixins son herramientas potentes, pero para maximizar su eficacia y mantenibilidad, es crucial adoptar una estructura clara y organizada. Aquí hay algunos consejos prácticos para organizar mixins de manera efectiva en tu proyecto Vue:

Separación de responsabilidades: Divide tus mixins en categorías basadas en la funcionalidad y la responsabilidad. Por ejemplo, puedes tener mixins para manipulación de datos, mixins de animación, mixins de interacción con el usuario, etc.
Nomenclatura consistente: Utiliza una convención de nomenclatura coherente y descriptiva para tus mixins. Opta por nombres que reflejen claramente su propósito y función dentro del proyecto.
Estructura de archivos organizada: Almacena tus mixins en archivos separados para facilitar la búsqueda y la gestión. Agrupa tus archivos según su función y relación con los componentes respectivos.
Documentación detallada: Proporciona comentarios claros y exhaustivos en tus mixins para explicar su propósito, uso y cualquier consideración importante para los desarrolladores que puedan utilizarlos en el futuro.
Reutilización selectiva: Asegúrate de que tus mixins sean lo suficientemente flexibles y modulares para que puedan ser reutilizados en diferentes contextos sin crear dependencias innecesarias o conflictos de código.

Siguiendo estos consejos, podrás estructurar tus mixins de manera eficiente y mantener un flujo de trabajo claro y organizado en tu proyecto Vue, lo que facilitará la colaboración y el mantenimiento a largo plazo.

Evitar conflictos y problemas potenciales al utilizar Mixins en múltiples componentes

Si bien los mixins son una herramienta valiosa, su uso indiscriminado puede conducir a conflictos y problemas potenciales, especialmente al implementarlos en varios componentes. Aquí hay algunas mejores prácticas para garantizar un uso seguro y eficiente de mixins en tu proyecto Vue:

Evitar nombres genéricos: Asigna nombres únicos y específicos a tus mixins para evitar colisiones de nombres y confusiones en el uso de métodos y propiedades compartidas.
Comprobación de existencia: Antes de usar un mixin en un componente, asegúrate de verificar si ya se ha aplicado un mixin similar para evitar posibles conflictos y redundancias en la lógica del componente.
Control de versiones y actualizaciones: Mantén un control estricto de las versiones de tus mixins y asegúrate de actualizar y mantener consistentes las versiones utilizadas en diferentes componentes para evitar incompatibilidades y problemas de rendimiento.
Pruebas exhaustivas: Realiza pruebas exhaustivas para detectar posibles conflictos o comportamientos inesperados que puedan surgir al aplicar mixins en varios componentes. Asegúrate de probar su interacción con otros mixins y componentes del proyecto.
Monitorización continua: Supervisa continuamente el rendimiento y la compatibilidad de tus mixins en diferentes partes de la aplicación para detectar y resolver cualquier problema potencial de manera oportuna.

Al comprender plenamente el potencial de los mixins y su impacto positivo en el desarrollo de aplicaciones Vue, los desarrolladores pueden construir aplicaciones más robustas, escalables y eficientes que satisfagan las demandas de un entorno de desarrollo en constante evolución.

Instancias de componentes en vue

Vanessa — Fri, 13 Oct 2023 13:18:14 +0000

Imagina que estás construyendo una casa con bloques de construcción. Cada bloque es como un componente en Vue. Cada uno tiene su propia forma y función especial.

Una instancia de componente en Vue es como una casa que estás construyendo con esos bloques. Es una versión específica y completa de esa casa, con sus propias características y personalidad.
Cada instancia de componente se comporta como una casa diferente, aunque estén hechas de los mismos bloques básicos. Puedes personalizar cada casa con diferentes colores, tamaños y estilos, al igual que puedes personalizar las instancias de componentes en Vue con diferentes datos y lógica.

Característica	Propiedades de instancia de componentes
Descripción	Son atributos o datos que pertenecen a una instancia de componente Vue.
Uso	Se utilizan para almacenar y acceder a datos específicos dentro de un componente.
Declaración y asignación	Se pueden declarar e inicializar en el bloque data de un componente o mediante asignación directa dentro de los métodos.
Reactividad	Las propiedades de instancia reactivas se actualizan automáticamente cuando cambian sus valores.
Alcance de la instancia	Son específicas de cada instancia de componente, lo que significa que no se comparten entre diferentes instancias de componentes.
Acceso desde componentes hijos	Pueden pasarse como props a componentes hijos para permitir el flujo descendente de datos.

En resumen, las instancias de componentes en Vue son como casas únicas que construyes usando los mismos bloques básicos de Vue, pero con personalizaciones y funcionalidades específicas para cada una.

Propiedades de instancias

$el: Se refiere al elemento HTML real al que Vue está vinculado. Es como la dirección física de una casa, indica dónde Vue está presente en el DOM.
$props: Representa las propiedades pasadas a un componente desde su componente padre. Son como los argumentos o datos que se pasan a una función en la programación.
$data: Contiene los datos internos de un componente. Es como una caja que contiene todas las variables y estados que un componente utiliza para su funcionamiento.
$options: Contiene las opciones de configuración y propiedades de un componente. Es como el manual de instrucciones que detalla cómo se debe configurar y comportar un componente.
$slots: Se utilizan para permitir que el contenido sea pasado desde el componente principal al componente hijo. Son como áreas designadas en un formulario donde se puede insertar información adicional.
$refs: Se utilizan para acceder a elementos del DOM o componentes hijos desde un componente padre. Son como etiquetas o marcadores que ayudan a referenciar y acceder a elementos específicos.
$attrs: Contiene los atributos no reconocidos pasados a un componente. Son como atributos HTML adicionales que se pasan a un componente personalizado y que no se reconocen como props.

Propiedad	Descripción	Uso y Aplicación
$el	Hace referencia al elemento DOM real al que está vinculado una instancia de componente.	Útil para acceder directamente al elemento DOM relacionado.
$props	Contiene las propiedades pasadas al componente desde su componente padre.	Se utilizan para transferir datos del componente padre al componente hijo.
$data	Contiene los datos del componente, definidos en el componente como una función que devuelve un objeto.	Se utiliza para almacenar y manipular datos específicos del componente.
$options	Contiene las opciones de inicialización del componente, incluidos los hooks, métodos y otros atributos.	Útil para acceder a las opciones y propiedades definidas del componente.
$slots	Proporciona acceso a los contenidos entre las etiquetas de apertura y cierre de un componente en su componente padre.	Utilizado para renderizar contenido dinámico dentro del componente.
$refs	Proporciona acceso a los elementos del DOM o instancias de componentes dentro de un componente.	Se utiliza para acceder directamente a elementos del DOM o componentes hijos.
$attrs	Contiene los atributos no reconocidos (no props) pasados a un componente, útil en componentes de nivel superior que pasan atributos a componentes hijos.	Utilizado para acceder a los atributos no reconocidos pasados al componente.

Method VS Computed - (vue)

Vanessa — Thu, 12 Oct 2023 17:10:19 +0000

La principal distinción radica en su reactividad. Las propiedades computadas operan de manera reactiva, similar a las variables, mientras que los métodos no siguen esta misma pauta.

Principales diferencias

Característica	Métodos	Prop Computadas
Ejecución	Invocados manualmente o en eventos.	Reactivos, se ejecutan automáticamente cuando sus dependencias cambian.
Parámetros de entrada	Pueden recibir parámetros de entrada.	No pueden recibir parámetros de entrada.
Valor de retorno	Pueden optar por no devolver un valor.	Deben devolver un valor.
Eficiencia	No tienen caché, se ejecutan siempre, incluso si el resultado es el mismo.	Tienen caché, lo que evita ejecuciones innecesarias si el valor no ha cambiado.
Uso común	Útiles para realizar acciones o cálculos con lógica personalizada.	Ideales para cálculos o transformaciones de datos que dependen de otros datos reactivos.
Invocación dentro de otros métodos	Comúnmente invocados dentro de otros métodos.	No se recomienda invocar propiedades computadas dentro de otros métodos debido a la caché. Se debe buscar una alternativa.

La reactividad en las propiedades computadas implica que cuando el valor de los datos cambia, la propiedad computada se activa automáticamente y proporciona el nuevo valor.

Es importante destacar que las propiedades computadas no aceptan argumentos de entrada, a diferencia de los métodos, que pueden recibirlos. Además, las propiedades computadas siempre deben devolver un valor, mientras que los métodos pueden optar por no hacerlo.

Otro punto de divergencia es que las propiedades computadas poseen una memoria caché, lo que significa que utilizar propiedades computadas resulta más eficiente, ya que Vue puede reconocer si la propiedad computada producirá el mismo valor y, en ese caso, evitará ejecutarla nuevamente para ahorrar recursos de cálculo. En cambio, los métodos se ejecutan invariablemente, incluso si el resultado es idéntico.

Por último, es común invocar propiedades computadas desde dentro de los métodos, mientras que no se aconseja ejecutar métodos dentro de propiedades computadas, debido a la posibilidad de utilizar la memoria caché. En tales casos, se recomienda explorar alternativas para evitar esta práctica.